✏️ TDZ란 무엇일까?
간단하게 설명하면, TDZ란 Temporal Dead Zone 으로 “임시 사각 지대” 라고 부른다. Javascript에서만 TDZ 라고 부르지만 개념 자체는 여러 언어에도 존재한다.
더 자세하게 알아보자면, TDZ란 번수가 선언되었지만 아직 초기화되지 않는 상태를 의미한다. “선언만 되고 아직 초기화 되지 않는 변수가 머무는 공간이다!” 라고 생각하면 쉽게 이해할 수 있다.
Javascript에서 let 이나 const 로 선언된 변수들은 TDZ을 거쳐간다. 이 구간에서 변수를 참조할려고 하면 ReferenceError 가 발생한다.
그럼 TDZ는 왜 필요할까?
TDZ의 주 목적은 프로그래밍 오류를 줄이는데 있다.
var 를 사용하던 시절에는, 변수를 선언하기 전에 사용해도 undefined 라는 값을 가질 뿐 에러가 발생하지 않는다. 이 때문에 종종 찾기 어려운 버그가 생기기도 했었다.
TDZ는 이런 문제를 해결하기 위해 “변수는 반드시 선언된 후에 사용해야 한다.” 는 규칙을 강제한다. undefined 라는 애매한 값 대신, ReferenceError 라는 명확한 에러를 발생시켜서 개발자가 실수를 바로 알아차릴 수 있게 도와준다.
🍀 변수의 3단계 생명주기
1. 선언 단계 (Declaration)
Javascript 엔진이 스코프에 변수를 등록하는 단계
“이런 이름의 변수가 있을거에요!” 라고 예고하는 것이다. (모든 변수가 호이스팅 되는 단계)
2. 초기화 단계 (Initialization)
메모리에 변수를 위한 공간을 할당하고, 임시로
undefined값을 할당하는 단계
이때부터 변수에 접근할 수 있게 된다.
3. 할당 단계 (Assignment)
변수에 실제 값을 대입하는 단계
name = '도비'
🍀 var, let, const 의 호이스팅과 TDZ
TDZ를 이해하기 위해서는 호이스팅과의 관게를 알아야 한다.
많은 사람들이 let 과 const 는 호이스팅이 되지 않는다고 오해하지만, 모든 선은 (var, let, const, function, classs)은 호이스팅된다.
1. var 의 경우 (TDZ 없음)
선언과 동시에
undefined로 초기화가 이루어진다.
var 로 선언된 변수는 스코프의 최상단으로 끌어올려져서(hoisted) 바로 undefined 로 초기화된다. 그렇기 때문에 선언 전에 접근해도 에러가 발생하지 않는다.
console.log(name); // undefined (에러가 아님!)
var name = '도비';
console.log(name); // "도비"2. let, const의 경우 (TDZ 존재)
선언만 끌어올려질 뿐, 초기화는 실제 코드 라인에 도달했을 때 이루어진다.
let 과 const 로 선언된 변수도 똑같이 스코프 최상단으로 호이스팅되지만, 초기화되지는 않는다. 대신, 선언문에 도달할 때까지 TDZ에 머무르게 된다.
// --- 여기서부터 TDZ 시작 ---
// name이라는 변수가 존재는 하지만, 접근할 수 없음
console.log(name); // 💥 ReferenceError: Cannot access 'name' before initialization
let name = '도비'; // --- 여기서 TDZ 끝 ---
console.log(name); // "도비"⭐️ 결론
결론적으로 TDZ는 ’호이스팅은 되지만 아직 초기화는 되지 않은 상태’ 를 강제하는 문법적 안정장치이다. 이 덕분에 우리는 var 를 쓸 때처럼 선언 전에 변수를 사용해서 생기는 논리적 오류를 피할 수 있는 것이다!
