[JS] TDZ - 시간상 사각지대

TDZ(Temporal Dead Zone)란 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 말한다.

자바스크립트 엔진은 (전역 스코프의 경우 런타임 이전에) 코드 평가 과정을 거치면서 선언된 변수를 실행 컨텍스트에 등록한다.

var 변수는 코드 평가 과정에서 변수 선언과 초기화를 동시에 진행하기 때문에 코드 실행 과정에서 변수 선언문을 만나기 이전에도 참조가 가능하다. 이때 var 변수는 undefined로 초기화된다.

console.log(getSquare(number)); // 변수 선언문 이전에 참조 -> number===undefined

var number;

number = 5;

function getSquare (num) {
	return num !== undefined ? num ** 2 : 'not a number';
}

이처럼 var 변수는 어디서나 참조가 가능하기 때문에 에러를 발생시키지 않는다.

var 변수는 변수 선언문 이전에 참조해도 에러가 발생하지 않는다. 즉, 변수 선언문 이전에 참조가 가능하다.

반면 let 변수는 코드 평가 과정에서 실행 컨텍스트에 등록은 되지만, 초기화되지 않는다. 코드 실행 과정에서 변수 선언문을 만나야 초기값(할당문이 없다면 undefined)으로 초기화되기 때문에 스코프의 시작 지점부터 변수 선언문 사이의 구간에서는 참조할 수 없다.

console.log(getSquare(number)); // 변수 선언문 이전에 참조 -> 에러 발생

let number; // 여기서 undefined로 초기화

number = 5; // 숫자 값 5 재할당

function getSquare (num) {
	return num !== undefined ? num ** 2 : 'not a number';
}

number는 실행 컨텍스트에 등록은 되었으나, 초기화가 되지 않았기 때문에 정의되지 않았다는 Reference Error가 발생한다.

이처럼 스코프 시작 지점부터 변수 선언문까지 변수를 참조할 수 없는 구간을 TDZ라고 한다.