[JS] - TDZ(Temporal Dead Zone)이란? 간단하고 쉽게 이해하기 (예제코드, 임시 사각 지대란?)

🧹 간단정리

TDZ란? 임시사각지대라고도 부르며 변수가 선언되기 전의 코드 영역을 말한다.

JS에만 있는 개념이다.

 

(자세한 내용은 아래참고 👀)

 

 

---

🥡 TDZ란?

변수가 선언되었지만 아직 초기화 되지 않는 상태를 말 한다.

쉽게 말 해 '선언만 되고 아직 초기화 되지 않는 변수가 머무는 공간'이라고 생각하면 될 거 같다!

 

JS에서 'let'이나 'const'로 선언한 변수들이 TDZ을 거쳐 간다.

이 공간에 있는 변수를 참조하려고 하면  'ReferenceError'를 마주할 것이다.

그럼 TDZ가 왜 필요한데?

TDZ의 주요 목적은 프로그래밍 오류를 줄이는데 있다.

대표적으로 초기화 되지 않는 변수를 사용하는 것을 방지할 수 있다.

 

---

🏃🏻‍♂️ TDZ의 동작(작동) 방식

TDZ의 동작 방식은 '변수 선언 전'과 '변수 선언 및 초기화' 2가지로 나누어 볼 수 있다.

다시 한 번 말 하지만 'let'이나 'const'로 선언한 변수들만 TDZ 동작 방식을 거쳐간다.

 

변수 선언전, 변수 선언 및 초기화를 아래에서 정말 정말 쉽게 설명하겠다.!!

---

🙊 변수 선언 전

변수가 호이스팅 되어 스코프의 시작점에 존재하지만 아직 초기화 되지 않는다. 

이 단계에서 변수에 접근하려고 하면 ReferenceError(참조 불가)에러 발생

 

📔 스토리  : 메모리에는 있지만 곧장 TDZ로 이동되는 안타까운 이야기

🧓🏻 : "어이 김씨! 거기 'let'이나 'const'로 선언한 변수 있지?"

👨🏻 : "응 여기 메모리에 잘있지!!"

🧓🏻 : "그럼 나 이 변수 사용해도 돼??"

👨🏻 :  "안돼 아직 고놈은 메모리에 있긴 하지만 TDZ라는 곳에 가둬져서 '초기화'가 안됐어 그래서 사용할 수 없어!"

🧓🏻 : "에헤이~ 알겠어! 그럼 초기화 하면 TDZ에서 꺼내준데?"

👨🏻 :  "아유 그럼그럼 꺼내주고 사용까지 할 수도 있으니 빨리 사용하고 싶으면 값을 초기화 해줘!"

 

🧑🏻‍💻 예제 코드

// let으로 선언된 변수
console.log(beforeLet); // ReferenceError
let beforeLet = "이제 사용 가능!";
console.log(beforeLet); // 출력: "이제 사용 가능!"

// const로 선언된 변수
console.log(beforeConst); // ReferenceError
const beforeConst = "이제 사용 가능!";
console.log(beforeConst); // 출력: "이제 사용 가능!"

 

---

 

🙉 변수 선언 및 초기화

변수가 선언되고 초기화된 후, 이제 안전하게 사용할 수 있는 단계.

이 단계에서는 변수가 TDZ(Temporal Dead Zone)를 벗어나고, 값이 할당되어 접근 및 사용이 가능.

 

 

📔 스토리 : TDZ를 벗어나 안전하게 사용되는 이야기

🧓🏻 : "김씨, 그 'let'이나 'const'로 선언한 변수 초기화했어?"

👨🏻 : "아유 그럼, 이제 값 할당 했으니. TDZ을 벗어나 메모리에만 안전하게 있지!"

🧓🏻 : "오! 그럼 이제 사용해도 문제없겠네?"

👨🏻 : "그럼 그럼! TDZ를 벗어났으니 이제 어디서든 사용 가능하지!"

 

(하하 호호) 

...예제코드로 이동해보자 :) (머쓱)

 

 

🧑🏻‍💻예제코드

// let으로 선언된 변수
let letVariable;
console.log(letVariable); // 출력: undefined (TDZ를 벗어남, 하지만 아직 값이 할당되지 않음)
letVariable = "이제 안전하게 사용 가능!";
console.log(letVariable); // 출력: "이제 안전하게 사용 가능!"

// const로 선언된 변수
// const constVariable; // 오류: const 선언 시 초기화 필요
const constVariable = "이제 안전하게 사용 가능!";
console.log(constVariable); // 출력: "이제 안전하게 사용 가능!"

 

 

 

---

💁🏻‍♂️ 마무리

아무쪼록 쉽게 설명하려고 재밌게 적어 봤는데 많은 분들에게 도움이 됐으면 한다.!
TDZ가 잘 이해가 됐다면 호이스팅에 대하여 더 알아보는 것도 추천한다!!