JavaScript 無名関数

概要: このチュートリアルでは、名前のない関数である JavaScript 無名関数について学習します。

JavaScript 無名関数の紹介

無名関数は、関数に名前がない関数です。無名関数の定義方法は次のとおりです。

(function () {
   //...
});Code language: JavaScript (javascript)

無名関数を括弧 `()` の中に配置しないと、構文エラーが発生します。括弧 `()` は、無名関数を関数オブジェクトを返す式にします。

無名関数は、最初に作成された後ではアクセスできません。そのため、多くの場合、変数に代入する必要があります。

たとえば、次の例はメッセージを表示する無名関数です。

let show = function() {
    console.log('Anonymous function');
};

show();Code language: JavaScript (javascript)

この例では、無名関数は `function` キーワードと括弧 `()` の間に名前がありません。

後で無名関数を呼び出す必要があるため、無名関数を `show` 変数に代入します。

無名関数を `show` 変数に代入する全体が有効な式であるため、無名関数を括弧 `()` で囲む必要はありません。

引数として無名関数を使用する

実際には、多くの場合、無名関数を他の関数の引数として渡します。たとえば、

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);Code language: JavaScript (javascript)

この例では、無名関数を `setTimeout()` 関数に渡します。`setTimeout()` 関数は、1 秒後にこの無名関数を実行します。

JavaScript では関数は第一級市民です。したがって、関数を引数として別の関数に渡すことができます。

即時関数実行

関数を宣言した直後に実行したい場合は、次のように無名関数を宣言できます。

(function() {
    console.log('IIFE');
})();Code language: JavaScript (javascript)

出力

IIFE

動作方法。

まず、関数式を定義します。

(function () {
    console.log('Immediately invoked function execution');
})Code language: JavaScript (javascript)

この式は関数を返します。

次に、末尾の括弧 `()` を追加して関数を呼び出します。

(function () {
    console.log('Immediately invoked function execution');
})();Code language: JavaScript (javascript)

場合によっては、次のように無名関数に引数を渡したい場合があります。

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

(function () {
    console.log(person.firstName + ' ' + person.lastName);
})(person);Code language: JavaScript (javascript)

出力

John Doe

アロー関数

ES6 では、アロー関数式が導入され、無名関数を宣言するための簡略表記が提供されています。

たとえば、この関数

let show = function () {
    console.log('Anonymous function');
};Code language: JavaScript (javascript)

…は、次のアロー関数を使用して短縮できます。

let show = () => console.log('Anonymous function');Code language: JavaScript (javascript)

同様に、次の無名関数

let add = function (a, b) {
    return a + b;
};Code language: JavaScript (javascript)

…は、次のアロー関数と機能的に同等です。

let add = (a, b) => a + b;   Code language: JavaScript (javascript)

まとめ

• 無名関数は名前のない関数です。
• 無名関数は、他の関数の引数または即時関数実行として使用できます。