TDZ란?

let 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 분리되어 진행됩니다

런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행됩니다

만약 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생합니다.

let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지

스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ: Temporal Dead Zone) 라 부릅니다.

// 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
// 초기화 이전의 일시적 사각 지대에서는 변수를 참조할 수 없다.
console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에 도달해서 초기화 단계가 실행된다.
console.log(foo); // undefined (초기화 단계가 실행돼서)

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

💡 foo가 var였다면 TDZ가 없으므로 맨 위에 있는 console.log()에서 undefined가 나옵니다