hoisting とは何ですか？

Question

hoisting とは何ですか？

Accepted Answer

**Hoisting** とは、コードが実行される前のコンパイルフェーズで、JavaScript が**宣言**をそのスコープの先頭へ移動させる挙動のことです。ただし、*どのように* hoisting されるかは宣言の種類によって異なります。

```js
console.log(a); // undefined  — `var a` is hoisted & initialized to undefined
var a = 1;

foo();          // "works!" — function declarations are fully hoisted
function foo() { console.log("works!"); }

console.log(b); // ❌ ReferenceError — temporal dead zone
let b = 2;
```

## 何が、どのように hoisting されるか

- **`var`**：宣言が hoisting され、`undefined` に初期化されます。そのため早期に読み取ると、エラーではなく `undefined` が返ります。
- **`function` 宣言**：完全に hoisting されます — 定義行より前に呼び出すことができます。
- **`let` / `const`**：hoisting はされますが、**初期化はされません**。ブロックの開始から宣言行までの間、*Temporal Dead Zone*（TDZ）に置かれます。TDZ 内でアクセスすると `ReferenceError` が発生します。
- **関数式**（`const f = () => {}`）は早期に呼び出せません — hoisting されるのは `const`/`var` の束縛だけで、関数そのものではありません。

## なぜ重要なのか

Hoisting は「なぜこれが `undefined` なのか？」や「なぜ定義より前にこの関数を呼べるのか？」を説明します。`let`/`const` の TDZ は実際には *機能* です — 静かな `undefined` のバグを大きなエラーへと変え、使う前に宣言することを促します。