Temporal Dead Zone(TDZ)이란 무엇인가요?

TDZ는 let과 const 선언이 스코프에 들어온 뒤 초기화되기 전까지 접근할 수 없는 구간입니다. 변수는 호이스팅되지만 초기화 전 접근 시 ReferenceError가 발생합니다.

핵심 개념

핵심 기준은 let/const 호이스팅과 초기화 시점입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

JavaScript는 실행 문맥, 비동기 흐름, 참조 관계가 코드 동작에 직접 영향을 주는 언어입니다. 그래서 문법을 외우는 것보다 값이 언제 결정되고 어떤 순서로 실행되는지 이해하는 것이 중요합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

console.log(name); // ReferenceError
const name = "Ada";

if (true) {
  // count는 이 블록 시작부터 TDZ에 들어갑니다.
  let count = 1;
  console.log(count);
}

let과 const도 스코프에는 등록되지만 초기화 전에는 접근할 수 없습니다. 이 특성 덕분에 선언 전 사용 실수를 빠르게 발견할 수 있습니다.

실무에서 주의할 점

• 암묵적 변환이나 실행 문맥에 기대면 작은 리팩터링에도 동작이 달라질 수 있습니다.
• 비동기 코드에서는 실행 순서와 에러 전파 경로를 반드시 확인해야 합니다.
• 브라우저 이벤트나 타이머를 사용했다면 정리(cleanup) 시점을 놓치지 않는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

JS, TDZ, let, const

정리

한 줄로 정리하면, TDZ는 let과 const 선언이 스코프에 들어온 뒤 초기화되기 전까지 접근할 수 없는 구간입니다. 변수는 호이스팅되지만 초기화 전 접근 시 ReferenceError가 발생합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

TDZ가 생기는 이유

TDZ(Temporal Dead Zone)는 let과 const로 선언한 변수가 스코프에 들어왔지만 아직 초기화되기 전까지 접근할 수 없는 구간입니다. 호이스팅이 안 되는 것이 아니라, 호이스팅은 되지만 초기화 전 접근을 금지하는 것입니다.

console.log(name); // ReferenceError
const name = 'Kim';

var는 선언과 함께 undefined로 초기화되므로 접근은 가능하지만, 이는 버그를 숨기기 쉽습니다.

console.log(count); // undefined
var count = 1;

블록 스코프와 TDZ

const value = 'outer';

{
  // 이 블록 안에서는 아래 const value가 스코프를 차지함
  console.log(value); // ReferenceError
  const value = 'inner';
}

바깥 value가 있어도 블록 내부의 const value가 우선 스코프에 등록되기 때문에 TDZ가 발생합니다.

실무 팁

• 변수는 사용하는 위치와 최대한 가까운 곳에서 선언합니다.
• 조건문/반복문 안에서 let, const의 블록 스코프를 적극 활용합니다.
• typeof undeclared는 안전하지만, TDZ에 있는 변수에 typeof를 써도 ReferenceError가 납니다.