자바스크립트는 기본적으로 모든 선언을 호이스팅한다. 하지만 let은 선언 이전에 참조하면 참조에러가 발생한다. 그 이유는 바로 일시적 사각지대 때문이다.

TDZ(Temporal Dead Zone)

일시적인 사각지대.
스코프의 시작 지점부터 초기화 시작 지점까지의 구간

변수 선언의 3단계

javascript에서의 변수는 위의 사진처럼 선언(Declaration phase), 초기화(Initialization phase), 할당(Assignment phase)이라는 3단계에 걸쳐서 생성된다.

• 선언 (Declaration phase) : 변수를 실행 컨텍스트에 등록하는 단계. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.

• 초기화 (Initialization phase) : 실행 컨텍스트에 존재 하는 변수에 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.

• 할당 (Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계.

var와 let/const는 이 3단계 순서에 차이가 존재한다.
var 키워드는 선언과 초기화가 한 번에 이루어지지만 let은 선언 후 일시적 사각지대에 빠지게 된다. 선언과 초기화가 분리되어 진행된다는 의미이다.

var 키워드의 라이프사이클

console.log(a); //undefined
 
var a = "hi";
 
console.log(a); //hi

var로 선언한 변수는 변수 선언전에 선언 단계와 초기화 단계를 동시에 진행한다.
그래서 javascript는 실행 컨텍스트 변수 객체의 변수를 등록하고 메모리를 undefined로 만든다.
그렇기 때문에 변수 선언 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생한다.

let 키워드의 라이프사이클

console.log(b); //Reference Error: b is not defined
 
let b = "hi";
 
console.log(b);

let으로 선언한 변수를 이전에 사용하려고 하면 Reference Error가 발생한다. 이를 보면 호이스팅이 발생하지 않는다고 보일 수 있다.

하지만, 호이스팅이 일어나 메모리 공간을 확보한 뒤, 일시적 사각지대(TDZ) 에 빠져있는 상태이기 때문에 Reference Error가 발생하는 것이다.