[Javascript] TDZ (Temporal Dead Zone)

JS TDZ, Temporal Dead Zone, 일시적 사각지대

정의

TDZ (Temporal Dead Zone) 는 let/const/class 선언이 호이스팅된 시점부터 선언문 (실행) 직전까지 의 접근 불가 구간.

{
    // ↓ TDZ 시작
    console.log(x);     // ❌ ReferenceError
    let x = 1;          // ← TDZ 끝
    console.log(x);     // ✓ 1
}

var 와의 비교

console.log(a);      // undefined (var 는 TDZ 없음)
var a = 1;

console.log(b);      // ReferenceError
let b = 1;

var 는 호이스팅 시 자동으로 undefined 초기화, let/const 는 미초기화 상태 (TDZ).

TDZ 의 의미

이름이 헷갈리는 부분: “호이스팅된 시점부터 선언문까지” 라는 시간적 (temporal) 사각지대. 코드 위치가 아닌 실행 시점 기준.

function foo() {
    return x;
}

// foo() 를 여기서 호출하면 ReferenceError
foo();      // ❌

let x = 1;

// 여기서는 OK
foo();      // ✓ 1

호이스팅된 변수가 같은 스코프 안에서 발견되지만, 선언문 실행 전까지는 사용 불가.

class 도 TDZ

new Foo();          // ❌ ReferenceError
class Foo {}

class 도 let/const 와 같은 TDZ.

함수 매개변수 default 의 TDZ

function foo(a = b, b = 1) {     // ❌ b 가 a 의 default 에서 TDZ
    return a;
}
foo();

매개변수도 왼쪽부터 평가, 뒤에 있는 매개변수는 앞 매개변수의 default 안에서 TDZ.

함정

1. typeof 가 안전한 함정

console.log(typeof undeclared);    // 'undefined' (안전)
console.log(typeof x);              // ❌ ReferenceError
let x = 1;

typeof 가 일반적으로 안전한 검사지만, TDZ 안의 let/const 에는 적용 안 됨.

2. 같은 스코프의 같은 이름

let x = 1;
{
    console.log(x);    // ❌ ReferenceError (x 가 호이스팅되어 안쪽 스코프 가림)
    let x = 2;
}

안쪽 블록의 let x 가 호이스팅되어 바깥의 x 를 가린다. 그 결과 TDZ.

3. for-of, for-in 의 let

for (let item of arr) { ... }
// 매 반복마다 새 binding (안전)

var item 은 같은 변수, let item 은 매 반복 새 변수 → 클로저 안전.

모범 사례

1. 선언을 사용 직전에, TDZ 진입 회피
2. scope 최상단에 모든 선언 같은 옛 스타일 피하기
3. const 우선, 재할당 의도 명확

참고

• JS var / let / const
• JS 호이스팅
• JS 스코프 체인