# TDZ (Temporal Dead Zone)

## 개요

**TD**(Temporal Dead Zone, 시간적 사각지)는 자바스크립트(ECMAScript 6, ES2015 이후)에서 `let`과 `const` 키워드로 선언된 변수들이 호이스팅(hoisting)되지만, 선언 이전에 접근할 수 없는 상태를 의미하는 개념입니다. 이는 `var`로 선언된 변수와의 주요 차이점 중 하나이며, 변수의 생명주기와 스코프를 이해하는 데 중요한 역할을 합니다.

TDZ는 변수가 **스코프 내에서 존재는 하지만 아직 초기화되지 않은 상태**를 설명하며, 이 구간에서 변수에 접근하면 `ReferenceError`가 발생합니다. 이 문서에서는 TDZ의 개념, 동작 원리, 예시, 그리고 개발 시 주의사항에 대해 다룹니다.

---

## TDZ의 기본 개념

### 호이스팅과 TDZ의 관계

자바스크립트는 변수 선언을 **호이스팅**하는 특징이 있습니다. 그러나 `var`, `let`, `const`는 호이스팅 방식이 다릅니다.

- `var`: 선언과 초기화가 호이스팅되며, `undefined`로 초기화됩니다.
- `let`, `const`: 선언은 호이스팅되지만, **초기화는 선언 위치에서만 이루어집니다**. 이로 인해 선언 이전 구간에서 변수에 접근할 수 없게 되고, 이를 TDZ라고 부릅니다.

```javascript
console.log(a); // undefined (var는 호이스팅 + 초기화)
var a = 1;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 2;

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 3;
```

위 코드에서 `b`와 `c`는 TDZ에 위치하므로 참조 시 오류가 발생합니다.

---

## TDZ의 동작 원리

### 실행 컨텍스트와 TDZ

자바스크립트 엔진은 코드 실행 전에 **실행 컨텍스트**(Execution Context)를 생성합니다. 이 과정에서 변수 선언이 호이스팅되고, 변수는 **Lexical Environment**(사전적 환경)에 등록됩니다.

- `var`: 선언과 동시에 `undefined`로 초기화 → TDZ 없음.
- `let` / `const`: 선언은 되지만 초기화는 나중에 → 초기화 전까지 TDZ 상태.

TDZ는 다음과 같은 순서로 동작합니다:

1. 변수가 스코프에 등록되지만 **초기화되지 않음**.
2. 코드 실행 중 변수를 참조하면 TDZ에 있는지 확인.
3. TDZ 상태면 `ReferenceError` 발생.
4. 변수가 초기화되면 TDZ 종료.

---

## TDZ의 예시

### let과 const의 TDZ 예시

```javascript
function example() {
  console.log(value); // ReferenceError
  let value = 'Hello';
}
example();
```

이 코드에서 `value`는 함수 스코프 내에서 호이스팅되지만, `let`으로 선언되었기 때문에 초기화 전까지 TDZ에 있습니다. 따라서 `console.log`에서 `ReferenceError`가 발생합니다.

### 블록 스코프에서의 TDZ

```javascript
{
  console.log(x); // ReferenceError
  const x = 'block-scoped';
}
```

블록 내에서도 `const`는 TDZ를 형성합니다. 블록의 시작부터 `x`가 선언된 위치까지는 TDZ입니다.

---

## TDZ와 함수 선언

함수 선언은 TDZ의 영향을 받지 않습니다. 하지만 **함수 표현식**(Function Expression)은 `let`이나 `const`로 선언할 경우 TDZ에 포함됩니다.

```javascript
console.log(func1); // [Function: func1] — 호이스팅됨
func1(); // 정상 실행

function func1() {
  console.log('호이스팅됨');
}

console.log(func2); // ReferenceError — TDZ
func2(); // 실행되지 않음

const func2 = function() {
  console.log('TDZ에 있음');
};
```

---

## TDZ의 주의사항 및 개발 팁

### 1. 변수 선언은 항상 위로 올리기
TDZ를 피하기 위해 `let`과 `const` 변수는 가능하면 스코프의 시작 부분에 선언하는 것이 좋습니다.

```javascript
function goodExample() {
  let name = 'Alice';
  let age = 25;

  console.log(name, age); // 안전
}
```

### 2. 조건부 선언 시 주의
`let`이나 `const`는 조건문 내에서 선언할 수 있지만, 외부에서 접근 시 TDZ에 빠질 수 있습니다.

```javascript
if (false) {
  const msg = 'Hello';
}
console.log(msg); // ReferenceError — msg는 존재하지 않음 (스코프 외부)
```

### 3. TDZ는 `typeof`에도 적용됨
`var`는 `typeof`로 안전하게 검사할 수 있지만, `let`/`const`는 TDZ에서 `typeof` 사용 시 오류가 발생합니다.

```javascript
console.log(typeof undeclaredVar); // undefined (문제 없음)
console.log(typeof letVar);        // ReferenceError — TDZ
let letVar;
```

---

## 참고 자료 및 관련 문서

- [MDN Web Docs - let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let)
- [MDN Web Docs - const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const)
- [ECMAScript 2015 Language Specification (ES6)](https://262.ecma-international.org/6.0/#sec-let-and-const-declarations)
- [You Don't Know JS (book series) - Scope & Closures](https://github.com/getify/You-Dont-Know-JS)

---

## 결론

TDZ는 자바스크립트에서 `let`과 `const`의 안전한 변수 사용을 보장하기 위한 중요한 메커니즘입니다. 이는 개발자가 변수를 선언하기 전에 사용하는 실수를 방지하고, 코드의 예측 가능성을 높입니다. TDZ를 이해함으로써 자바스크립트의 변수 생명주기와 호이스팅 동작을 보다 정확하게 파악할 수 있으며, 버그를 줄이고 견고한 코드를 작성하는 데 도움이 됩니다.

현대 자바스크립트 개발에서는 `var` 대신 `let`과 `const`를 기본으로 사용하는 것이 권장되며, 이에 따라 TDZ의 개념은 필수적인 지식이 되었습니다.