[JavaScript] TDZ(Temporal Dead Zone) : 변수의 시간 여행~

🐣 변수의 시간 여행! Temporal Dead Zone!

오늘은 TDZ에 대해서 살펴보도록 하겠다. Temporal Dead Zone, TDZ! 넌 무엇이니!?

 

https://kr.pinterest.com/pin/252272016599000508/

 

🐣 TDZ 란?

---

1. 개념

TDZ(Temporal Dead Zone)는 변수가 선언된 위치부터 초기화될 때까지의 영역을 말한다. let과 const 변수는 선언되었지만 아직 초기화되지 않은 상태에서 접근하려고 하면 TDZ에 해당하며 에러가 발생! 이후 변수가 초기화되면 TDZ를 벗어나 정상적으로 사용 가능하다!

쉽게 말하면, 변수가 생성(=변수선언)되고 메모리에 처음 값이 저장(=초기화) 될 때까지의 영역으로
메모리에 초기 값이 없는 상태에서 접근하려고 하면 에러가 발생한다는 것!

 

ES6의 let과 const는 변수를 블록의 상단으로 *호이스팅 하지만 초기화하지는 않음! 변수가 선언되기 전에 블록 안에서 사용할 수 없는데, 이 위치를 시간상 사각지대(Temporal Dead Zone, TDZ)라고 표현한다. (ReferenceError 발생)

* 참고로 var 선언의 경우 undefined로 초기화 되기 때문에 TDZ가 없다.

 

호이스팅은 컴파일 단계 중에 변수 및 함수 선언이 포함 범위의 맨 위로 이동되는 동작

참고로
변수의 let, const에 대한 개념 / 변수 선언 및 초기화에 대한 개념은
아래 게시물 참고~!

[JavaScript] 변수의 선언, 초기화, 할당

[JavaScript] var, let, const 차이점

 

2. 코드

[myLet과 myConst에 접근]  초기화 전 

• TDZ를 보여주는 ReferenceError가 발생

[myLet과 myConst에 접근]  초기화 이후

• 정상적으로 접근 가능

[var의 경우]

• var는 호이스팅되고 undefined로 초기화되므로 TDZ가 없음!
• 선언하기 전에 myVar에 액세스하면 오류가 발생하는 대신 undefined이 출력

// Temporal Dead Zone (TDZ) example

// ReferenceError 발생: TDZ 내에서 접근 시도
try {
  console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
} catch (e) {
  console.log(e.message);
}

let myLet = 'This is let';
// TDZ 이후 정상 접근
console.log(myLet); // 'This is let'

// ReferenceError 발생: TDZ 내에서 접근 시도
try {
  console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
} catch (e) {
  console.log(e.message);
}

const myConst = 'This is const';
// TDZ 이후 정상 접근
console.log(myConst); // 'This is const'

// var 변수는 TDZ가 없음
console.log(myVar); // undefined
var myVar = 'This is var';
console.log(myVar); // 'This is var'

 

 

🐣 TDZ 요약

---

TDZ는 'let' 또는 'const' 변수 선언과 초기화 사이의 영역
TDZ의 변수에 접근하면 'ReferenceError'가 발생
let과 const에는 TDZ가 있지만 var에는 없음

 

 

어디한번다시설명해보자궁!