자바스크립트에서 어떻게 호이스팅이 가능할까?

자바스크립트에서 호이스팅(hoisting)은 변수나 함수 선언이 코드 상의 위치와 관계없이 스코프의 최상단으로 끌어올려진 것처럼 동작하는 현상을 말한다.
많은 개발자들이 처음 접할 때 혼란을 느끼지만, 이 동작은 자바스크립트 엔진의 내부 처리 과정에서 매우 자연스럽게 발생한다.

---

호이스팅이 일어나는 이유: 두 단계의 실행 과정

자바스크립트 엔진은 코드를 해석할 때 단순히 위에서 아래로 실행하지 않는다. 아래의 두 단계를 거치며 코드를 처리한다.

1. 컴파일 단계 (Compilation Phase)
2. 실행 단계 (Execution Phase)

호이스팅은 바로 컴파일 단계에서 선언부를 먼저 처리하는 과정에서 발생

---

1. 컴파일 단계: 선언을 먼저 메모리에 올리는 과정

실행되기 전에, 엔진은 전체 스크립트를 훑으며 변수와 함수 선언을 먼저 메모리에 등록한다.

✔ var

• 컴파일 단계에서 메모리에 등록됨
• 초기값은 자동으로 undefined
• 그래서 선언보다 먼저 접근해도 오류가 나지 않고 undefined 출력

✔ let, const

• 컴파일 단계에서 등록되지만 초기화는 실행 단계에서 이루어짐
• 초기화가 되기 전까지는 TDZ(Temporal Dead Zone) 상태 → 접근하면 오류 발생

✔ 함수 선언식 (function declaration)

• 전체 함수가 컴파일 단계에서 메모리에 저장되기 때문에 선언 전에도 호출 가능

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

이 코드는 실제로 아래처럼 동작하는 것과 동일하다.

var myVar; // 컴파일 단계에서 메모리에 undefined로 등록
console.log(myVar);
myVar = 5; // 실행 단계에서 값이 할당
console.log(myVar);

👉 따라서 첫 번째 console.log는 undefined가 출력

---

2. 실행 단계: 실제 코드 실행

컴파일 단계가 끝나면 엔진은 이제 각 코드를 실제로 실행한다.

• 변수에 값이 할당되고
• 함수가 호출되며
• 조건문/반복문 등이 순차적으로 수행됩니다.

즉, 컴파일 단계에서 선언이 준비되고, 실행 단계에서 값이 채워져 동작하는 구조이다.

---

정리: 자바스크립트에서 호이스팅은 어떻게 가능한가?

자바스크립트는 코드 실행 전에 컴파일 단계에서 선언을 먼저 처리해 메모리에 올리는 구조를 가지고 있다.
이 때문에 선언이 코드 아래에 있어도 실제 실행 시에는 이미 메모리에 등록되어 있는 것이다.

• 자바스크립트는 컴파일 → 실행의 두 단계 구조를 가진다.
• 컴파일 단계에서 변수/함수 선언이 메모리 등록된다.
• var는 undefined로 초기화되므로 선언 이전에도 접근 가능.
• let/const는 TDZ 때문에 초기화 전 접근 시 에러.

---

END