TDZ

let/const로 선언한 변수가 호이스팅은 되지만, 선언문에 도달하기 전까지 접근할 수 없는 구간입니다.

왜 존재하나?

TDZ 동작

// --- TDZ 시작 (스코프 진입) ---
console.log(name);  // ReferenceError!
console.log(name);  // ReferenceError!
// --- TDZ 끝 ---
let name = "홍길동";  // 선언 도달 → TDZ 종료
console.log(name);    // "홍길동" (정상)

var vs let 비교

// var - 선언 전 접근 가능 (위험)
console.log(a);  // undefined
var a = 10;

// let - TDZ로 보호 (안전)
console.log(b);  // ReferenceError
let b = 10;

TDZ가 적용되는 구간

{
  // 블록 시작 = TDZ 시작

  // 이 구간에서 name 접근 불가

  let name = "홍길동";  // TDZ 끝

  console.log(name);  // 접근 가능
}

실수하기 쉬운 케이스

함수 내부에서

let value = "외부";

function test() {
  console.log(value);  // ReferenceError!
  let value = "내부";  // 이 선언 때문에 TDZ 발생
}

test();

기본값 할당에서

// 에러: x가 TDZ에 있는데 x를 참조
let x = x + 1;  // ReferenceError

// 앞 변수는 참조 가능
let a = 1;
let b = a + 1;  // 정상

클래스에서도 동일

const instance = new MyClass();  // ReferenceError

class MyClass {}  // 클래스도 TDZ 적용

TDZ 적용 여부

선언 방식TDZ
varX (undefined로 접근 가능)
letO
constO
classO
함수 선언문X
함수 표현식let/const 따라감

핵심 정리

호이스팅은 된다 + 접근은 안 된다 = TDZ

CSLOG에서 보기