[JS] let, const와 var의 호이스팅 차이

let,const가 기존 hoisting을 따르지 않는다는 말이 있어서 찾아보았다

JS에서는 3단계에 걸쳐서 변수를 생성한다
1. 선언(Declaration): 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다.
2. 초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 undefined다.
3. 할당(Assignment): 변수 객체에 값을 할당한다.

var lifecycle

var는 호이스팅을 통해 선언 시 동시에 초기화가 진행된다

let, const lifecycle

let, const는 호이스팅을 통해 선언이 되지만 동시에 초기화가 되진 않는다
그러다 선언문을 만나면 초기화가 진행되는데(위 그림에서 let variable), 선언문을 만나기 전 까지를 TDZ(Temporal Dead Zone)이라고 부른다.

let, const와 var 호이스팅 비교 예시

let 변수는 호이스팅으로 선언만 이루어지고 초기화가 되지 않았기 때문에 ReferenceError가 뜬다

반면 var 변수는 호이스팅으로 선언과 초기화가 동시에 이루어졌기 때문에 undefined가 나타나는 것을 볼 수 있다

+) 함수의 생성

함수는 앞서 말한 3단계가 한 번에 진행된다