호이스팅(Hoisting)이란?

1️⃣ 호이스팅(Hoisting)이란?

호이스팅(Hoisting) 이란

자바스크립트 엔진이 코드를 실행하기 전에
변수와 함수의 선언을 먼저 메모리에 등록하는 동작입니다.

⚠️ 중요한 점

• 코드가 실제로 위로 이동 ❌
• 선언만 미리 등록 ⭕
• 값 할당은 원래 위치에서 실행

---

2️⃣ ES6 기준 핵심 요약

ES6에서는 “선언은 호이스팅되지만, 접근은 제한된다”

이 접근 제한 구간이 바로 TDZ입니다.

---

3️⃣ TDZ란 무엇인가?

✅ TDZ 풀네임

Temporal Dead Zone

✅ 의미

변수는 존재하지만,
선언되기 전까지 접근이 금지된 구간

---

4️⃣ 가장 기본적인 예제

console.log(a); // ❌ ReferenceError
let a = 10;

왜 에러가 날까요?

---

5️⃣ 내부 동작을 그림으로 이해하기

📌 코드

{
  console.log(a);
  let a = 10;
}

---

📌 실행 흐름 다이어그램

스코프 진입
│
│   a 선언 등록 (호이스팅)
│   ┌─────────────────────┐
│   │  TDZ (접근 불가)     │
│   │                     │
│   │  console.log(a) ❌   │
│   │                     │
│   │  let a = 10  ← 여기 │
│   └─────────────────────┘
│
│   a 사용 가능
│
스코프 종료

✔️ 변수 a는 존재함
❌ 하지만 TDZ 안에서는 접근 불가

---

6️⃣ TDZ는 언제 시작되고 끝날까?

TDZ 시작: 스코프에 진입하는 순간
TDZ 종료: 선언문(let / const / class) 실행 시점

---

7️⃣ let / const / class 비교

console.log(x); // ❌
let x = 1;

console.log(y); // ❌
const y = 2;

new User(); // ❌
class User {}

➡️ 모두 TDZ 적용 대상

---

8️⃣ 함수는 왜 다를까?

✅ 함수 선언문 (예외)

hello();

function hello() {
  console.log("Hello");
}

✔️ 정상 실행
➡️ 함수 전체가 호이스팅

---

❌ 화살표 함수 / 함수 표현식

hello(); // ❌

const hello = () => {
  console.log("Hello");
};

➡️ 변수 규칙 + TDZ 적용

---

9️⃣ ES6 호이스팅 + TDZ 한 눈에 정리

┌────────────────────────────────────┐
│            스코프 시작              │
├────────────────────────────────────┤
│ 선언 등록 (Hoisting)                │
│                                    │
│ TDZ (접근 불가 영역) ❌             │
│                                    │
│ let / const / class 선언문          │
│ ────────────────────────────────▶ │
│ TDZ 종료                            │
│                                    │
│ 정상 사용 가능 ⭕                   │
├────────────────────────────────────┤
│            스코프 종료              │
└────────────────────────────────────┘

---

10️⃣ 왜 TDZ가 필요한가?

❌ ES5 (문제점)

console.log(total); // undefined
var total = 100;

• 에러 없음
• 버그 추적 어려움

---

✅ ES6 (TDZ 도입)

console.log(total); // ❌ 즉시 에러
let total = 100;

✔️ 실수 즉시 발견
✔️ 안전한 코드
✔️ 예측 가능한 실행 흐름

---

11️⃣ 초보자가 꼭 기억할 문장

“ES6에서 호이스팅은 TDZ를 전제로 이해해야 한다”

---

🔚 마무리 요약

개념	핵심
Hoisting	선언을 실행 전에 등록
TDZ	선언 전 접근 금지 구간
대상	let / const / class
목적	버그 방지, 안전성

---

📌 한 문장 요약

TDZ는
‘자바스크립트가 잘못된 접근을 막아주는 안전선’이다