JavaScript 関数式

1. 関数式（Function Expression）とは？

関数式 とは、変数に保存された関数 のことです。

// 標準的な関数（関数宣言）
function 掛ける(a, b) {
  return a * b;
}

// 関数式
const 掛ける = function(a, b) {
  return a * b;
};

例

const 掛ける = function (a, b) { return a * b };

関数式を変数に格納した後は、その変数を関数名として使用することができます。

例

let z = 掛ける(4, 3);

2. 匿名関数

関数式は通常、匿名関数（名前のない関数） を作成するために使用されます。

上記の例で作成された関数には、実際には名前がありません。変数に格納された関数は名前を必要とせず、変数名を使用して呼び出す からです。

ただし、関数式に名前を付けることも可能です（名前付き関数式）：

const 加算 = function 加算(a, b) { return a + b; };

3. 関数式にはセミコロンが必要

関数式は JavaScript の 「文（Statement）」 の一部です。
そのため、通常は末尾に セミコロン を付けて終了します。

const 加算 = function(a, b) {
  return a + b;
};

4. 変数に保存された関数の活用

関数式は変数に保存されているため、「値」 と同じように扱うことができます。
これは、関数を別の関数の引数として渡す コールバック（Callbacks） 処理において非常に有用です。

関数式は、変数への代入だけでなく、他の関数への引数として渡したり、関数からの戻り値として返したりすることができます。

function 実行する(fn) {
  return fn();
}

const 挨拶する = function() {
  return "こんにちは";
};

実行する(挨拶する);

5. 関数宣言 vs 関数式

JavaScript の関数は function キーワードで定義されますが、その定義方法にはいくつか種類があります。
中でも 関数宣言（Function Declarations） と 関数式（Function Expressions） は、構文や JavaScript エンジンによる扱いが異なります。

• 呼び出し時の動作はどちらも同じです。
• 最大の違いは、コード内で 「いつ利用可能になるか」 です。

5.1 関数宣言と関数式の比較

関数宣言 は以下を使用して定義されます：

• function キーワード
• 関数名
• かっこ内のパラメータ
• 波かっこ内のコードブロック

function 加算(a, b) { return a * b; }

関数式 は以下を使用して定義されます：

• function キーワード
• かっこ内のパラメータ
• 波かっこ内のコードブロック（これらを変数に代入する）

const 加算 = function(a, b) { return a + b; };

例

const 挨拶する = function() {
  return "ハローワールド";
};

挨拶する();

上記の関数は変数 挨拶する に保存されており、実行するには 挨拶する() を呼び出します。

6. ホイスティング (Hoisting / 巻き上げ)

関数宣言と関数式の決定的な違いは、ホイスティング（巻き上げ） の挙動にあります。

• 関数宣言 は、定義される前であっても呼び出すことができます。
• 関数式 は、定義される前に呼び出すことはできません。

関数宣言は、スコープの先頭に「巻き上げ」られます。そのため、コード上で定義より前に呼び出しを記述しても動作します。

let 合計 = 加算(2, 3); // ⭕ 動作する

function 加算(a, b) { return a + b; }

一方、関数式は関数宣言のような巻き上げは行われません。実行がその定義行に到達して初めて作成されるため、それ以前に呼び出すとエラーになります。

let 合計 = 加算(2, 3); // ⛔ エラーが発生する

const 加算 = function (a, b) { return a + b; };

7. 主な違いのまとめ