Multi Developer SuHo

[ 자바스크립트 유용한 정보] TDZ(Temporal Dead Zone)란? 본문

자바스크립트 기록

[ 자바스크립트 유용한 정보] TDZ(Temporal Dead Zone)란?

Dreaming Developer Student 2025. 1. 13. 11:52
SMALL

안녕하세요~ 이번엔 간단한 자바스크립트에서 TDZ(Temporal Dead Zone) 에 대해 알아보겠습니다. TDZ가 무엇이고 간단한 코드들에 대한 예시를 들면서 설명해보겠습니다~

 

목차
1. TDZ(Temporal Dead Zone)
1-1. TDZ란?
1-2. TDZ 특징
1-3. TDZ 발생 코드 

 

서론

먼저 TDZ(Temporal Dead Zone)에서  Dead Zone? 만 보시면 이상현상이 발생하는 영역으로 해석할 수 있습니다. 그럼 TDZ가 무엇인지, 왜 발생하는지 간단한 코드를 통해 이해하는 시간을 가져보겠습니다.

 

본론

1. TDZ(Temporal Dead Zone)

 

1-1. TDZ(Temporal Dead Zone)이란?

선언하고 초기화 이전에 식별자를 참조할 수 없는 영역을 개발자가 만든 것.

 

1-2. TDZ 특징 2가지

 

1.선언 전에 접근하면 참조할수 없는 영역으로 ReferenceError 발생한다.

2.TDZ는 코드 실행 흐름을 따라 변화

 



1-3. TDZ 발생 코드 

주석으로 설명을 대체합니다.

function foo() { 
  // 전역 컨텍스트 생성
  // foo 함수의 실행 컨텍스트 생성
  let a = 1; // foo 실행 컨텍스트에 레코드의 기록
  function foo2() {
    // foo2 함수의 실행 컨텍스트 생성
    console.log(b); // b 변수를 찾으나 foo2의 스코프에 없으므로 ReferenceError 발생 console.log(b) 에서 b가 TDZ 영역에 있음음
    console.log(foo3()); // foo3 함수 호출
  }
  foo2(); // foo2 함수 호출
  let b = 2; // b 변수에 2 할당 (foo 함수의 변수 객체에 저장)
  // foo2 함수 호출 시점에는 b가 undefined 상태였으므로 ReferenceError 발생
}

function foo3() {
  // foo3 함수의 실행 컨텍스트 생성
  return 4;
}

foo(); // foo 함수 호출, foo 함수의 실행 컨텍스트 생성




TDZ(Temporal Dead Zone)은 let과 const로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간으로,  이때 변수를 참조하면 ReferenceError가 발생한다. 이를 방지하기 위해 변수를 사용하기 전에 반드시 선언하고 초기화하는 습관을 가지셔야 합니다. 

 

 이상입니다. TDZ 에 대한 내용을 마무리하겠습니다. 감사합니다. 

LIST