関数宣言（function declaration）と関数式（function expression）の違いは何ですか？

Question

Accepted Answer

**宣言（declaration）** は名前付きの関数文であり、**式（expression）** は関数を変数に代入します。実務上の違いは **hoisting** です。

```js
// Declaration — fully hoisted, callable before its line
declared();             // ✅ works
function declared() { return "hi"; }

// Expression — only the variable binding is hoisted, not the function
expressed();            // ❌ TypeError: expressed is not a function
var expressed = function () { return "hi"; };
```

## なぜ違いが生じるのか

関数宣言は**本体ごと** hoisting されるため、実行が到達する前に関数全体が存在します。関数式は単に変数に代入された値にすぎません — 早期に呼び出した時点では、`expressed` はまだ `undefined`（`var` の場合）か TDZ 内（`let`/`const` の場合）です。

## どちらをいつ使うか

```js
// expression — for callbacks, conditional definitions, arrow functions
const handler = () => doThing();
const fn = condition ? a : b;
arr.map(x => x * 2);

// declaration — clear, hoisted top-level functions
function calculateTotal(items) { ... }
```

宣言はトップレベルの名前付き関数として読みやすく、hoisting の恩恵を受けられます（使用箇所より後で定義できます）。式は arrow function、コールバック、IIFE、条件付きの関数代入に必要です。Arrow function は常に式です。