[Javascript] let/const/ var

자바스크립트 변수를 선언하는 방법에는 let, const, var 3가지 방법이 있다. 이 세 가지에 대해 알아보자.

 

const

const 는 상수이다. 상수란 값이 변하지 않고 고정된 값이다. 즉, 변하고 싶지 않은 값들을 만들 때 쓴다.

 

const title = "제목";
title = "제목2";

>> TypeError: Assignment to constant variable.

title 에 "제목2" 라고 다른 값을 할당하는 시도를 했을 때 TypeError 가 발생한다.

 

var

var 은 예전부터 쓰이던 자바스크립트 변수 선언 방식이다. 그러다 보니 문제점도 많다..?

 

재선언 가능

var title = "제목1";
var title = "제목2";

변수를 선언했는데 뒤에서 같은 변수명으로 또 선언이 가능하다. 이러한 특징은 협업할 때 문제가 생기기 십상이다. 누군가가 중요한 데이터를 넣을 변수를 선언했는데 다른 누군가가 같은 이름으로 변수를 선언하고 앞선 데이터와는 다른 데이터를 넣었다고 생각해 보자. 더 나중에 선언된 변수명에 데이터가 들어가고 있는 상황이라 심각한 일이 벌어질 수도.. 있다.

 

후선언 가능

console.log(title);
var title = "제목";

>> undefined

선언을 나중에 했는데 오류가 안난다.

 

title = "제목";
var title;

var 로 선언하지도 않았는데 오류가 안난다.

 

이는 호이스팅 때문인데 호이스팅이란 자바스크립트 엔진이 코드 실행 전에 선언해 둔 변수들을 조사한 다음에 메모리에 기억을 해둔다. 이렇게 조사한 변수들은 해당 코드가 존재하는 파일의 최 상단으로 끌어올리는 것을 호이스팅이라한다. 

위의 예시에서 title 선언이 되지 않았는데 오류가 발생하지 않고 undefined 로 출력된 이유도 이와 같은 이유이다. title 을 출력하는 코드 이후에 선언된 title 을 자바스크립트 엔진이 미리 조사를 하고 기록했기때문에 선언 전에 출력을 시도해도 변수가 있다고 인식하고 오류가 안나는 것이다. 

 

→ 이런저런 이유로 var 사용을 지양하는 것으로 알고 있다. var 사용하지 말자! let 을 사용하자! 

 

let

let 은 2015년도 ES6 가 나올 때 나온 선언 방식이다. let 은 위에서 보여준 var 의 문제점을 모두 해결한 선언 방식이다. 그러면 let 은 var 와 달리 호이스팅 하는 대상이 아닌 걸까? 그건아니다! let 도 호이스팅이 된다! 

다만 let 은 TDZ(Temporal Death Zone)을 적용해서 선언문이 나오기 전까지는 접근할 수 없도록 해서 문제를 해결했다.