TDZ(Temporal Dead Zone) 정리

javaScript

오늘은 자바스크립트에서 자주 헷갈릴 수 있는 개념인 **TDZ(Temporal Dead Zone)**에 대해 정리해 보았다.

TDZ란 무엇인가

TDZ는 직역하면 "임시 사각지대"인데, let과 const로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간을 말한다.

즉, 변수가 스코프 안에 존재하긴 하지만 아직 사용할 수 없는 상태를 의미한다. 이 구간에서 변수를 참조하려 하면 ReferenceError가 발생한다.

예시

JavaScript
console.log(a); // ReferenceError
let a = 10;

위 코드에서 변수 a는 선언되기 전이 아니라, 사실상 스코프 안에 이미 "존재"하고 있다. 하지만 초기화되기 전이므로 TDZ에 걸려 접근할 수 없는 것이다.

var와 비교하면 차이가 더 명확해진다.

JavaScript
console.log(b); // undefined
var b = 10;

var는 호이스팅 과정에서 undefined로 초기화되기 때문에 접근이 가능하지만, let과 const는 TDZ 때문에 초기화되기 전에는 접근할 수 없다.

TDZ가 중요한 이유

  1. 예상치 못한 동작 방지
    • var에서 자주 발생하던 “호이스팅으로 인한 의도치 않은 값 참조” 문제를 막아 준다.
  2. 더 안전한 코드 작성
    • 초기화 전 접근을 차단하기 때문에, 선언과 동시에 명확하게 값을 할당하도록 유도한다.
  3. 코드 가독성 향상
    • 변수가 언제부터 유효한지 코드 상에서 명확해진다.

정리

  • TDZ는 let과 const 변수가 선언된 스코프 안에서 초기화되기 전까지 접근할 수 없는 구간이다.
  • TDZ 구간에서 변수를 참조하면 ReferenceError가 발생한다.
  • var와 달리 TDZ가 있기 때문에 더 안전하고 예측 가능한 코드를 작성할 수 있다.