01. let and const

sol·2022년 1월 20일
0

Javascript ES6

목록 보기
2/2

0.ES6을 보고 온 사람이라면 이 글을 왜 쓰는지 알겠지만, 혹시라도 모르는 사람을 위해서 설명하자면, ES6 ES6 말만 들어봤지 정확히 어떤 것이 업데이트가 된 건지 모르니 알아보자는 순수한 금궁증에서 아 이거 나중에 기억 못 할 거 같으니 미래의 나를 위해 정리하자라는 목표로 나를 위해 그리고 나 같은 사람들을 위해이 정리 글을 쓰게 되었다.
지금 지식 단계가 낮은 편으로 레벨 업을 하면 추후에 정확도가 높은 정보들이 추가될 수도 있으니 혹시라도 이상한 부분이 있으면 언제든 댓글로 남겨주시면 반영하겠습니다.


const


기존에 자바스크립트에서 선언을 하기 위해서는 var를 사용하였는데 이 var는 한번 선언하더라도 이후에 재선언을 하면 재할당이 가능했다.

이게 뭔말이냐면 하단을 봐보자

var a = "당근";
var b = "케이크";
var a = "버섯";
var b = "향수";

console.log("당신은 "+ a +b+"를 좋아합니다.")

라고 할때 a와 b는 무엇으로 나올까? 눈치 챘겠지만, "당신은 버섯(a) 향수(b)를 좋아합니다." 라고 나온다. (끔찍해!)

자바스크립트는 위에서 아래로 실행되는 언어인데, 위에서 a를 당근이라고 선언해도 아래에서 a = "버섯"이라고 재할당을 했기 때문에 당신은 당근 향수가 아닌 버섯 향수를 좋아하게 된 것이다.

이게 왜 문제가 되냐면 지금 같은 예제는 오류가 발생되어도 찾기 쉽겠지만,
만약 몇백줄 몇천줄의 코드 속에서 변수를 재선언했고, 그로인해서 발생한 이슈를 해결하기위해 수많은 코드를 쳐다보며 어디서 실수했는지 찾아보려면 정말 끔찍할 것이다.

그것을 보완하고자 ES6에서는 constlet 이 새로 추가되었는데, 각각의 특징을 보자면

cosnt 일단 사용되면 변수를 다시 할당할 수가 없다.
즉, 객체와 함께 사용할 때를 제외하고는 변경 불가능하다.

그래서 위에 var처럼


const a = "오렌지";

const a =  "사과"; 

재선언을 하려고 하면 이미 a에 변수선언이 되었다고 오류나온다.
<SyntaxError: Identifier 'a' has already been declared>

[const 재할당 불가 인증샷]

그럼 어떤상황에서 쓰게되는가 하면
이벤트를 실행하는 단일 버튼이거나 Javascript에서 html요소를 지정할때 const 를 사용하는게 좋다.
html은 웹을 구성하는 틀,뼈대 이다. 만약 뼈대가 막 변한다? 큰일날 일이다.


Let


그렇다면 let은 const와 무엇이 다를까 ?
심플하다 재선언이 가능하다는 점! 그것이 다르다.

let은 var처럼 한번 선언하더라도 하단에 재할당이 가능하다.
그렇기에 변함없이 유일무이한것을 사용해야할땐 const를 사용하고 이후에 수정이 되어도 상관없는 것들은 let을 사용하면 된다.

정리하면
Id,password 등등 변경되면 큰일날때 사용하는건 → const
성별(?!),주소,취미 등 변경될수 있는것엔 → let

을 사용 하면 된다 정리끝!

profile
귀여운 율무랑 레슈랑

0개의 댓글