TDZ
Temporal Dead Zone란 한글로 직역하자면 일시적 사각지대라는 뜻이다. 이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone)라고 한다.
JavaScript에서 변수는 선언, 초기화, 할당이라는 세 단계를 거친다.
- 선언(Declaration phase): 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
- 초기화 단계(Initialization phase): 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계이다. 이 단계에서 할당된 메모리에는 undefined로 초기화된다.
- 할당 단계(Assignment phase): 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계이다.
var 키워드 변수는 변수 선언전에 선언 단계와 초기화 단계를 동시에 진행된다. 그래서 JavaScript는 실행 컨텍스트 변수 객체의 변수를 등록하고 메모리를 undefined로 만들어 버린다.
그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이되는 호이스팅이 발생하는 것이다.
let으로 선언된 변수는 var 키워드와는 다르게 선언단계와 초기화 단계가 분리되어서 진행이 된다. 그렇기 때문에 실행 컨텍스트에 변수를 등록했지만, 메모리가 할당이 되질 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생하는 것이고, 이것을 보고 우리가 호이스팅이 되질 않는다라고 오해할 수 밖에 없었던 것이다.
TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말한다. 즉 let 또한 선언전, 실행 컨텍스트 변수 객체에 등록이 되어 호이스팅이 되지만, 이 TDZ 구간에 의해 메모리가 할당이 되질 않아 참조 에러(ReferenceError) 발생하는 것이다.