[TDZ] 선언했는데 왜 에러가 날까?

TDZ(Temporal Dead Zone) 

자바스크립트에서 let이나 const로 변수를 선언했는데, 예상치 못한 ReferenceError가 발생한 경험, 있으신가요? “분명 선언했는데 왜 안 되지?”라는 의문을 불러일으키는 이 상황의 핵심엔 바로 TDZ(Temporal Dead Zone)라는 개념이 숨어 있습니다.

이 글에서는 TDZ가 무엇인지, 어떻게 생기는지, 그리고 왜 var에는 없고 let/const에만 생기는지를 간단한 예제와 함께 정리해봅니다.

 

---

1.  TDZ(Temporal Dead Zone)란?

TDZ(Temporal Dead Zone)는 자바스크립트에서 변수가 선언되었지만 초기화되지 않은 시점부터, 초기화가 완료되기 전까지의 영역을 의미합니다. 즉, let이나 const로 선언된 변수는 선언 전에 접근하면 에러가 발생하는 "죽은 구간(dead zone)"이 존재합니다. 이와 달리 var로 선언한 변수는 호이스팅되면서 undefined로 초기화되므로 이런 문제가 발생하지 않습니다.

 

예제로 보는 TDZ

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;

• 위 코드에서 x는 호이스팅은 되었지만, 초기화되기 전(TDZ)이기 때문에 참조 시 ReferenceError 가 발생합니다.

var와 비교

console.log(y); // undefined
var y = 10;

• var 는 호이스팅과 동시에 undefined 로 초기화되기 때문에 접근 가능은 하지만 값은 할당 전까지 undefined 입니다.

 

---

2.  TDZ의 발생 조건

선언 방식	TDZ 발생 여부	설명
var	X	선언과 동시에 undefined로 초기화
let	O	선언되었지만 초기화 전까지 TDZ 발생
const	O	let과 동일 + 반드시 선언과 동시에 초기화 필요

 

---

3.  TDZ는 왜 필요한가?

TDZ는 다음과 같은 이유로 설계되었습니다.

• 명확한 변수 초기화 보장 : 코드의 가독성과 안정성을 높이기 위해, 변수가 언제부터 유효한지 명확히 구분합니다.
• 숨겨진 버그 방지 : var 의 호이스팅으로 인한 undefined 오류를 방지합니다.
• 블록 스코프 보호 : let/const는 블록 레벨 스코프를 따르며, TDZ는 이 스코프의 무결성을 유지해줍니다.

 

---

4.  TDZ 예시

함수 내 

function example() {
  console.log(a); // ReferenceError
  let a = 5;
}

• 위 코드는 let a 가 함수 전체에 호이스팅은 되지만, 실제 선언 줄까지 TDZ 상태이므로 에러가 발생합니다.

조건문 내 TDZ

if (true) {
  console.log(msg); // ReferenceError
  let msg = "Hello";
}

for 문 TDZ

for (let i = 0; i < 3; i++) {
  console.log(i); // 정상 출력
}
console.log(i); // ReferenceError: i is not defined

• let 으로 선언된 i 는 블록 스코프를 가지며, 해당 스코프 외부에서는 TDZ와 같은 효과로 인해 접근이 불가능합니다.

 

---

5.  TDZ를 피하기 위한 팁

• 변수를 선언하기 전에 사용하지 않도록 항상 위에서 선언하고, 아래에서 사용합니다.
• let/const 는 파일 맨 위나 블록 맨 위에 선언합니다.
• 의도적으로 undefined 초기화가 필요하면 var 보다는 let x = undefined 를 명시적으로 사용합니다.

 

---

6.  마무리

• TDZ(Temporal Dead Zone)는 let 과 const 에서만 발생하는 구간으로, 선언되었지만 초기화되지 않은 시점부터 초기화 전까지의 영역입니다.
• 이 구간에서 변수에 접근하면 ReferenceError 가 발생합니다.
• var 는 초기화까지 undefined 를 갖기 때문에 TDZ가 없습니다.
• TDZ는 변수 스코프를 명확히 하고, 코드 안정성을 높여줍니다.

함께 보면 좋은 자료

블로그 글 : 

[var, let, const] 자바스크립트 변수 선언의 차이점과 쓰임새

 

---