TDZ

작성자

익명

작성일

2025.09.01

조회수

버전

📋 문서 버전

이 문서는 2개의 버전이 있습니다. 현재 최신 버전을 보고 있습니다.

TDZ (Temporal Dead Zone)

개요

TDZ(Temporal Dead Zone, 시간적 사각지대)는 JavaScript에서 let과 const 키워드로 선언된 변수가 선언되기 전에 접근할 수 없는 구간을 의미하는 개념입니다. 이는 기존의 var 키워드와는 다른 동작 방식으로, 변수의 호이스팅(hoisting)이 발생하더라도 실제로 사용하기 전까지 접근이 금지되는 현상을 설명합니다.

TDZ는 ES6(ECMAScript 2015)에서 도입된 let과 const의 블록 스코프(block scope) 특성과 밀접한 관련이 있으며, 변수 사용의 안정성과 예측 가능성을 높이기 위한 언어 설계상의 의도된 제약입니다.

TDZ의 동작 원리

1. 호이스팅과 TDZ의 관계

JavaScript에서는 변수 선언이 호이스팅되어 해당 스코프의 상단으로 끌어올려집니다. 하지만 var, let, const는 호이스팅의 방식이 다릅니다.

var: 선언과 초기화가 동시에 호이스팅 → undefined 상태로 접근 가능
let / const: 선언은 호이스팅되지만, 초기화는 실제 코드 위치에서만 수행

이 때문에 let과 const는 선언문 이전 구간에서 참조할 수 없으며, 이 구간이 바로 TDZ입니다.

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

위 코드에서 a는 호이스팅되지만, 초기화 전이므로 TDZ에 속하며 접근 시 [ReferenceError](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%98%A4%EB%A5%98%20%EC%B2%98%EB%A6%AC/ReferenceError)가 발생합니다.

2. TDZ에 진입하는 경우

다음과 같은 상황에서 TDZ가 발생합니다:

let 또는 const로 선언된 변수를 선언 이전에 참조
class 선언을 선언 이전에 참조 (클래스도 TDZ 적용)
function 선언이 아닌 const func = () => {} 형태의 함수 표현식

// TDZ 예시
{
  console.log(b); // ReferenceError
  let b = 20;
}

TDZ와 var의 차이

특성	`var`	`let` / `const`
호이스팅	O (초기값 `undefined`)	O (초기화 없음)
TDZ 존재 여부	❌	✅
선언 전 접근	가능 (undefined 반환)	불가능 (ReferenceError)
스코프	함수 스코프	블록 스코프

✅ 예시 비교

console.log(x); // undefined
var x = 5;

console.log(y); // ReferenceError!
let y = 10

var는 선언 이전에 접근해도 에러 없이 undefined를 반환하지만, let은 TDZ로 인해 에러가 발생합니다.

TDZ의 목적과 장점

1. 변수 사용의 안정성보

TDZ는 개발자가 실수로 아직 선언되지 않은 변수를 사용하는 것을 방지합니다. 이는 버그를 사전에 차단하고, 코드의 예측 가능성을 높이는 데 기여합니다.

2. 블록 스코프의 일성 유지

let과 const는 블록 스코프를 따르며, 변수가 실제로 사용되기 전까지 존재하지 않아야 한다는 직관적인 동작을 반영합니다. TDZ는 이 직관을 언어 수준에서 강제합니다.

3. 호이스팅의 부작용 최소화

기존 var의 호이스팅은 종종 혼란을 유발했습니다. 예를 들어, 변수가 선언되기 전에 사용되어 undefined가 되는 상황은 의도치 않은 동작을 초래할 수 있습니다. TDZ는 이러한 문제를 해결합니다.

TDZ와 typeof 연산자

var 변수는 선언 전에 typeof로 검사해도 undefined를 반환하지만, let과 const는 TDZ 내에서 typeof 사용 시에도 에러가 발생합니다.

console.log(typeof undeclaredVar); // undefined (존재하지 않는 변수)

console.log(typeof tdzVar); // ReferenceError!
let tdzVar;

이처럼 TDZ는 typeof 같은 연산자까지 제한하여, 변수가 실제로 초기화되기 전까지는 아무런 접근도 허용하지 않습니다.

TDZ의 실제 영향 및 주의사항

1. 조기 참조 방지

다음과 같은 코드는 TDZ로 인해 실행되지 않습니다:

function getValue() {
  return value; // ReferenceError!
}

let value = 'hello';
console.log(getValue()); // 호출 시 TDZ에 걸림

2. IIFE나 클로저 내에서도 동일하게 적용

TDZ는 스코프 내에서 일관되게 적용됩니다.

(() => {
  console.log(c); // ReferenceError
  const c = 'IIFE에서 const';
})();

참고 자료 및 관련 문서

요약

TDZ(시간적 사각지대)는 let과 const 변수가 선언되기 전에 접근할 수 없는 구간입니다.
호이스팅은 되지만 초기화가 되지 않아, 접근 시 ReferenceError가 발생합니다.
var는 TDZ가 없어 선언 이전에도 undefined로 접근 가능합니다.
TDZ는 변수 사용의 안정성과 코드의 명확성을 높이기 위한 ES6의 핵심 설계 원칙 중 하나입니다.

TDZ를 이해함으로써 JavaScript의 변수 선언 메커니즘을 더 깊이 파악하고, 안정적인 코드를 작성할 수 있습니다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# TDZ (Temporal Dead Zone)

## 개요

**TDZ**(Temporal Dead Zone, 시간적 사각지대)는 JavaScript에서 `let`과 `const` 키워드로 선언된 변수가 **선언되기 전에 접근할 수 없는 구간**을 의미하는 개념입니다. 이는 기존의 `var` 키워드와는 다른 동작 방식으로, 변수의 **호이스팅**(hoisting)이 발생하더라도 실제로 사용하기 전까지 접근이 금지되는 현상을 설명합니다.

TDZ는 ES6(ECMAScript 2015)에서 도입된 `let`과 `const`의 블록 스코프(block scope) 특성과 밀접한 관련이 있으며, 변수 사용의 안정성과 예측 가능성을 높이기 위한 언어 설계상의 의도된 제약입니다.

---

## TDZ의 동작 원리

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

JavaScript에서는 변수 선언이 **호이스팅**되어 해당 스코프의 상단으로 끌어올려집니다. 하지만 `var`, `let`, `const`는 호이스팅의 방식이 다릅니다.

- `var`: 선언과 초기화가 동시에 호이스팅 → `undefined` 상태로 접근 가능
- `let` / `const`: 선언은 호이스팅되지만, **초기화는 실제 코드 위치에서만 수행**

이 때문에 `let`과 `const`는 선언문 이전 구간에서 참조할 수 없으며, 이 구간이 바로 **TDZ**입니다.

```javascript
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;
```

위 코드에서 `a`는 호이스팅되지만, 초기화 전이므로 TDZ에 속하며 접근 시 `ReferenceError`가 발생합니다.

---

### 2. TDZ에 진입하는 경우

다음과 같은 상황에서 TDZ가 발생합니다:

- `let` 또는 `const`로 선언된 변수를 선언 이전에 참조
- `class` 선언을 선언 이전에 참조 (클래스도 TDZ 적용)
- `function` 선언이 아닌 `const func = () => {}` 형태의 함수 표현식

```
// TDZ 예시
{
  console.log(b); // ReferenceError
  let b = 20;
}
```

---

## TDZ와 var의 차이

| 특성 | `var` | `let` / `const` |
|------|------|-----------------|
| 호이스팅 | O (초기값 `undefined`) | O (초기화 없음) |
| TDZ 존재 여부 | ❌ | ✅ |
| 선언 전 접근 | 가능 (undefined 반환) | 불가능 (ReferenceError) |
| 스코프 | 함수 스코프 | 블록 스코프 |

> ✅ **예시 비교**

```javascript
console.log(x); // undefined
var x = 5;

console.log(y); // ReferenceError!
let y = 10```

`var`는 선언 이전에 접근해도 에러 없이 `undefined`를 반환하지만, `let`은 TDZ로 인해 에러가 발생합니다.

---

## TDZ의 목적과 장점

### 1. 변수 사용의 안정성보

TDZ는 개발자가 실수로 아직 선언되지 않은 변수를 사용하는 것을 방지합니다. 이는 버그를 사전에 차단하고, 코드의 **예측 가능성**을 높이는 데 기여합니다.

### 2. 블록 스코프의 일성 유지

`let`과 `const`는 블록 스코프를 따르며, 변수가 실제로 사용되기 전까지 존재하지 않아야 한다는 직관적인 동작을 반영합니다. TDZ는 이 직관을 언어 수준에서 강제합니다.

### 3. 호이스팅의 부작용 최소화

기존 `var`의 호이스팅은 종종 혼란을 유발했습니다. 예를 들어, 변수가 선언되기 전에 사용되어 `undefined`가 되는 상황은 의도치 않은 동작을 초래할 수 있습니다. TDZ는 이러한 문제를 해결합니다.

---

## TDZ와 typeof 연산자

`var` 변수는 선언 전에 `typeof`로 검사해도 `undefined`를 반환하지만, `let`과 `const`는 TDZ 내에서 `typeof` 사용 시에도 에러가 발생합니다.

```javascript
console.log(typeof undeclaredVar); // undefined (존재하지 않는 변수)

console.log(typeof tdzVar); // ReferenceError!
let tdzVar;
```

이처럼 TDZ는 `typeof` 같은 연산자까지 제한하여, 변수가 실제로 초기화되기 전까지는 **아무런 접근도 허용하지 않습니다**.

---

## TDZ의 실제 영향 및 주의사항

### 1. 조기 참조 방지

다음과 같은 코드는 TDZ로 인해 실행되지 않습니다:

```javascript
function getValue() {
  return value; // ReferenceError!
}

let value = 'hello';
console.log(getValue()); // 호출 시 TDZ에 걸림
```

### 2. IIFE나 클로저 내에서도 동일하게 적용

TDZ는 스코프 내에서 일관되게 적용됩니다.

```javascript
(() => {
  console.log(c); // ReferenceError
  const c = 'IIFE에서 const';
})();
```

---

## 참고 자료 및 관련 문서

- [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® 2023 Language Specification - TDZ](https://tc39.es/ecma262/)
- [Exploring ES6 - Block Scoping and TDZ](https://exploringjs.com/es6/ch_variables.html#sec_temporal-dead-zone)

---

## 요약

- **TDZ**(시간적 사각지대)는 `let`과 `const` 변수가 선언되기 전에 접근할 수 없는 구간입니다.
- 호이스팅은 되지만 초기화가 되지 않아, 접근 시 `ReferenceError`가 발생합니다.
- `var`는 TDZ가 없어 선언 이전에도 `undefined`로 접근 가능합니다.
- TDZ는 변수 사용의 안정성과 코드의 명확성을 높이기 위한 ES6의 핵심 설계 원칙 중 하나입니다.

TDZ를 이해함으로써 JavaScript의 변수 선언 메커니즘을 더 깊이 파악하고, 안정적인 코드를 작성할 수 있습니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(qwen-3-235b-a22b-instruct-2507)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나

TDZ