var 와 let, const 의 호이스팅 차이

자바스크립트의 변수에는 호이스팅이란 개념이 있다

컴파일 시 따로 변수를 저장해서 저장해두고, 실행 시 함수 내에서 변수가 아래나 중간에 있어도

저장한 걸 꺼내와 변수가 함수의 최상단에서 이미 선언된 것처럼 사용되는 것을 말한다

문제는 선언만 암시적으로 올라가고 할당은 그대로 제 위치에서 작동한다는 것이다

++ 충격적이게도 for문의 조건문에서 선언한 변수 i 마저도 호이스팅 되어서 for문이 끝나도 변수 i 가 남게된다!

console.log(x);   //   var 변수가 호이스팅에 의해 최상위로 선언만! 되어서 undefined 가 뜬다
var x = 3;

호이스팅의 개념이 없는 다른 언어의 경우, 변수 선언 전에 호출을 하면 컴파일 시 레퍼런스 에러가 뜨지만,

아주 개념 충만하신 자바스크립트님은 아래에 선언, 초기화 해도 위처럼 작동한다

이러면 에러가 생겨도 에러가 아니라 값이 undefined가 되어 넘어가니 예상치 못한 에러가 생기기 쉽다

ES6 에서 새로 나오신 let 과 const 는 이 문제를 극복할 수 있다

let 과 const 도 변수가 아래에 있어도 마찬가지로 호이스팅이 되어 할당 없이 선언만 올라가지만,

console.log(x);   //    Reference error!   참조에러 발생!
let x = 3;

올라는 가도 초기화 전에 사용하면 다른 언어처럼 참조가 안된다고 뜨도록 막아놨다

호이스팅 되어도 초기화 하기 전까지는 사용하지 못하는 이 코드 사이의 범위를

" 시간상 사각지대 " TDZ (Temporal Dead Zone) 이라고 한다

이 때 변수를 호출하면 var 는 근본없이 undefined 의 값을 가지지만, let과 const 는 근본있는 참조에러를 띄워

초기화 전에 썼다고 말해줘서 예상치 못한 에러가 생기지 않도록 돕는다!

let  그리고 const