var 와 let 의 차이 그리고 호이스팅

우선 호이스팅에 대해서 알자.

  간단하게 말하면 자바스크립트는 선언되어 있는 모든 변수들을 먼저 다 위로 불러서 선언만 미리한다. 이것을 호이스팅이라고한다.

 

  JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

 

  호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.

var과 let의 차이

  javascript는 var에게는 관대하고 let에게는 관대하지 않다.
그렇다면 var대신 왜 let을 써야하는가? 라고 질문할 수 있을 것 같다. 간단하게 대답하면 상수도 var로 쓸수도 있지만 우리는 const를 쓴다. 왜냐하면 우리가 의도한 문법에 맞지 않는 코드가 진행되는 것을 방지하기 위해서이다.

 

  let도 마찬가지이다. 다음 예를 보자.

 

console.log(i);
var i = 0;
console.log(i);

 

  보통의 프로그래밍 언어라면 에러가 나는 코드이다. 선언 전에 i를 호출하기 때문에.. 하지만 호이스팅으로 미리 i는 선언되기 때문에 에러가 나지 않고 결과값은 다음과 같다.

 

• result

undefined
0

 

  let의 경우 똑같이 개발하면 어떻게 될까?

 

console.log(i);
let i = 0;
console.log(i);

 

  이 경우 에러 메세지가 표시된다. 그런데 왜 에러가 나는 것 일까? js에서 변수는 호이스팅이 된다고 했는데?
그 이유는 TDZ(Temporal Dead Zone)이라는 개념 때문이다. TDZ를 두어서 변수가 선언되기 전에 해당 변수에 접근하여 사용하는 것을 방지하는 것이다.