4.3 無名関数
前項で function の基本構文を学習しましたが、function 関数には、必ずしも名前をつける必要はありません。
こうした関数名のない関数を「無名関数（anonymous function）」と呼びます。無名関数は単独で定義するのではなく、主に以下の２つの場面で使用されます。
1. 変数に代入する（関数式）
無名関数を作成し、それを変数に代入して使用する方法です。これを「関数式」と呼びます。
変数に代入することで、その変数名を関数名のように扱って呼び出すことができます。
// 無名関数を変数 multiply に代入します
const multiply = function(a, b) {
return a * b;
};
// 変数名を関数名のように使って呼び出します
console.log(multiply(4, 6)); // 出力: 24
2. イベントハンドラとしての利用
JavaScript 入門の第４章で、DOM(Document Object Model)について学習しました。
「あるボタンがクリックされたとき」など、特定のイベントが発生した際に実行する処理として、その場限りの関数を記述する場合にも無名関数が使われます。
// ボタン（id="btn"）がクリックされたときの処理を無名関数で定義
document.getElementById('btn').onclick = function() {
alert("クリックされました");
}
4.3.1 引数と戻り値を使った無名関数と関数式のプログラム
関数式を用いた無名関数の動作を実際に確認しましょう。
ソースフォルダ：public/ch04
ファイル名：anonymous.js
➢ anonymous.html
前項で作った ch04/funcion.html をコピーし、ch04 にペーストしてください。
その際に、ファイル名を anonymous.html に変更します。
ファイル内の funcion.html や function.js の記述も、anonymous.html や anonymous.js に修正します。
➢ anonymous.js
// anonymous.js
// 無名関数を変数 multiply に代入します
const multiply = function (a, b) {
return a * b;
};
// 変数名を関数名のように使って呼び出します
let total = multiply(4, 6);
alert("4 * 6 の結果は: " + total);
実行結果
解説
まず 4 行目の「const multiply = function (a, b) {」に注目してください。ここでは、前章で学んだ const という宣言を用いて、multiply という名称が、あたかも関数として動くように宣言しています。前章のポイントで const が固定するのは「参照先のアドレス」であり、内容そのものではないと説明した実例になっています。
const multiply という宣言以降、multiply という変数を使う時は、以降の無名関数が必ず呼び出されることが保証されます。これが let や var だと再代入可能なため、それ以降で中身が変更される恐れがありますので、ここでは使用できません。
multiply は無名関数の結果を返す箱のはずですが、無名関数と const 宣言で一意に紐づくことで、あたかも multiply という掛け算専用の関数を呼び出したような挙動を示します。
4: const multiply = function (a, b) {
5: return a * b;
6: }
9 行目は、前章で学んだ let を使い total という変数に、multiply(4, 6) の結果を代入しています。
9: let total = multiply(4, 6);