【JavaScript】無名関数（クロージャー） - 名前がない関数

JavaScriptの無名関数について解説します。

無名関数

無名関数は“名前のない関数”です。

別名でクロージャーとも呼び、関数を変数に代入したり、実引数として関数に与えることができます。

無名関数の定義

無名関数を使用するには関数と同様に定義を行います。

基本構文

function( 仮引数１, 仮引数２ ... ) {
    // 処理...
}

基本的には関数と同じ構文ですが、関数名は記述しません。

また、代入演算子で変数に記憶することが可能です。

変数 = function( 仮引数１, 仮引数２ ... ) {
    // 処理...
}

サンプル

___ih_hl_start
let addition = function( x, y ) {
    return x + y;
}
___ih_hl_end

１〜３行目が無名関数の定義です。

変数additionに代入演算子で無名関数を記憶しています。

無名関数の呼び出し

無名関数を記憶する変数を使って呼び出すことができます。

基本構文

変数( 実引数１, 実引数２ ... )

関数の呼び出しの構文において、関数名の部分に変数を記述します。

サンプル

let addition = function( x, y ) {
    return x + y;
};

___ih_hl_start
console.log( addition(3,8) );
___ih_hl_end

11

５行目のaddition(3,8)の部分が無名関数の呼び出しです。

実行結果から正常に処理されたことが確認できます。

実引数の利用

無名関数は実引数として与えることが可能です。

function calc( a, b, closure ) {
    ___ih_hl_start
    return closure(a, b);
    ___ih_hl_end
}

___ih_hl_start
let result1 = calc(5, 7, function( x, y ) {
    return x + y;
})
___ih_hl_end

console.log( result1 );

___ih_hl_start
let result2 = calc(5, 7, function( x, y ) {
    return x - y;
})
___ih_hl_end

console.log( result2 );

12
-2

calc関数は第3引数（closure）に無名関数を受け取り、その無名関数を呼び出します。

２つのcalc関数の呼び出し（５〜７行目と１１〜１３行目）では、第３引数に無名関数を与えており、実行結果から各無名関数の内容に従った処理が行われたことが確認できます。

直接的な呼び出し

無名関数は定義と同時に直接的に呼び出すことが可能です。

直接的な呼び出しを行うには、定義の終了波括弧（}）に続いて、通常の呼び出しのように丸括弧（()）と引数を記述します。

___ih_hl_start
let result = function( x, y ) { return x + y; }(3, 8);
___ih_hl_end

console.log(result);

11

１行目のfunction( x, y ) { return x + y; }(3, 8)が無名関数の定義と直接的な呼び出しです。

この部分は最終的に11になり、変数resultにはその値が記憶されたことが実行結果から確認できます。