호이스팅(hoisting)이란 무엇인가요?

Question

IT Interview Practice · Accepted Answer

**호이스팅(hoisting)**은 코드가 실행되기 전 컴파일 단계에서 **선언**을 해당 스코프의 최상단으로 끌어올리는 JavaScript의 동작입니다. 하지만 *어떻게* 호이스팅되는지는 선언 타입에 따라 다릅니다.

```js
console.log(a); // undefined  — `var a`는 호이스팅되어 undefined로 초기화됨
var a = 1;

foo();          // "works!" — 함수 선언은 완전히 호이스팅됨
function foo() { console.log("works!"); }

console.log(b); // ❌ ReferenceError — 일시적 사각지대(temporal dead zone)
let b = 2;
```

## 무엇이, 어떻게 호이스팅되는가

- **`var`**: 선언이 호이스팅되어 `undefined`로 초기화됩니다. 그래서 이른 시점에 읽으면 에러가 아니라 `undefined`가 나옵니다.
- **`function` 선언**: 완전히 호이스팅됩니다 — 정의 라인보다 앞에서 호출할 수 있습니다.
- **`let` / `const`**: 호이스팅되지만 **초기화되지 않습니다**. 블록 시작부터 선언 라인까지 *일시적 사각지대(Temporal Dead Zone, TDZ)*에 머물며, TDZ에서 접근하면 `ReferenceError`가 발생합니다.
- **함수 표현식**(`const f = () => {}`)은 이른 시점에 호출할 수 *없습니다* — 함수가 아니라 `const`/`var` 바인딩만 호이스팅됩니다.

## 왜 중요한가

호이스팅은 "왜 이게 `undefined`지?"와 "왜 정의보다 먼저 이 함수를 호출해도 동작하지?"를 설명합니다. `let`/`const`의 TDZ는 사실 *기능*입니다 — 조용한 `undefined` 버그를 시끄러운 에러로 바꿔, 사용 전에 선언하도록 유도합니다.

관련 질문

무엇이, 어떻게 호이스팅되는가

왜 중요한가