【JavaScript入門】すぐわかる！無名関数とは

みなさんこんにちは！Kotonoです。

今回はJavaScriptにおける「無名関数」について解説していきたいと思います。

この記事では

といった基本的な内容から

など、より発展的な内容に関してもわかりやすく説明していきたいと思います。

無名関数とは

皆さんは「無名関数」とは何か知っていますか？無名関数を使用した事はありますか？無名関数とはその名の通り「名前のない関数」です。

通常の関数の定義方法では、functionキーワードの後に任意の名前を設定しますが、無名関数ではその必要がありません。無名関数について学ぶ前に基本的な「関数」についておさらいを行いたい場合は、以下のリンクを参照してください。

無名関数を使用するメリット

わざわざ「無名関数」を使用するメリットとは何でしょうか。もっとも大きな要因としては「関数の名前を考える手間を省ける」ということです。これは意外に大きな利点です。

実際、プログラムを書いている際に変数や関数の名前が重複してしまったりするといけないので、よく考えなければいけませんよね。それに、一度しか使わない関数にいちいち名前を付与するのも面倒です。

また、後述する「即時関数」を使う時にも無名関数はよく使われます。

無名関数の使い方

では、さっそく無名関数の使い方をご紹介したいと思います。無名関数はJavaScriptプログラミングにおいて頻繁に出現するので、しっかり覚えてくださいね。

基本的な使い方

無名関数の基本的な定義方法をご紹介する前に、通常の関数の定義方法を見てみましょう。以下のコードをご覧ください。

function hoge(x,y){
    return x+y;
}

上のコードでは、functionキーワードの後にhogeという任意の関数名を指定しました。hoge関数は、引数に与えられたxとyを足したものを戻り値として返します。

この関数を呼び出すには以下のようにコードを書きます。

var result = hoge(1,2)

また、関数は変数に代入することが出来ます。以下のコードをご覧ください。

var myfun = function hoge(x,y){
    return x+y;
}

上のコードでは、hoge関数を変数myfunに代入しました。この場合、hoge関数を呼び出す際は以下のようにコードを書きます。

var result = myfun(1,2)

ご覧いただけるように、変数の名前であるmyfunを使用して関数を呼び出しています。hogeという名前は不必要となったので、省略してもいいよね！ということになったのです。

その流れで誕生したのが「無名関数」です。無名関数の基本的な定義方法は以下の通りです。

var myfun = function(x,y){
    return x+y;
}

上のコードでは、変数myfunに名前のない関数を代入しました。ご覧いただけるように、functionキーワードの後に名前が指定されていません。この関数を呼び出すには以下のようにコードを書きます。

var result = myfun(1,2)

上のコードを実行すると、変数resultに3が格納されます。

引数に無名関数を指定してみよう

このセクションでは、関数の引数に無名関数を指定してみましょう。引数に無名関数を指定する方法は、一回しか使わない関数がある場合に便利です。

主に、一回しか使用しない関数の為に名前を考える作業や、グローバルオブジェクトの汚染などを防ぐ為に使用されます。では、以下のコードをご覧ください。

setTimeout(function(){alert("Hello");},1000)

上のコードでは、setTimeout関数を使用して設定時間後に任意の関数を呼び出しています。

第一引数に呼び出したい関数、第二引数に設定時間（ミリ秒単位）を指定します。上のコードでは、第一引数に無名関数を使用し、1000ミリ秒後（1秒後）に アラートを表示させてみました。

setTimeout関数は第一引数に指定した関数を一回のみ実行させるので、無名関数を使用するのが合理的なんです。setTimeout関数の他にも、setInterval関数などでも同じように無名関数を使用する事が出来ます。

即時関数とは

「即時関数」は無名関数とセットで説明されていることが多いです。即時関数とは、その名の通り「即時に実行される関数」のことです。

以下は、即時関数の基本的な構文です。

(function() {
  ...
}());

ご覧いただけるように、無名関数が括弧の中に含まれており、最後にセミコロンで区切られています。即時関数は即時に実行されるため、先ほどご紹介したような呼び出し方法などは使用しなくて良いのです。

もちろん、引数なども指定できます。以下のコードをご覧ください。

var result = (function(x,y) {
  return x+y;
}(1,2));
console.log(result)

実行結果は以下の通りです。

3

上のコードの即時関数は引数に与えられたxとyと足したものを戻り値として返します。変数resultには即時関数の実行結果を格納し、それをconsole.log関数で表示させました。正常に3と表示されたのが確認出来ましたね。

即時関数を使う主なメリットとしては、グローバルスコープと関数スコープの使い分けが挙げられます。再利用されない関数の処理などが、関数スコープ外に影響を及ぼさない為に使用される場合が多いです。

スコープについての詳しい説明は以下のリンクを参照してください。

無名関数を使用する際の注意点

では最後に、無名関数を使用する際に注意しておきたいポイントをご紹介いたします。無名関数は通常の関数とは違って名前がないため、変数に代入するか、別の関数の引数として指定しなければいけません。

通常の関数は、以下のように定義が出来ます。

function hoge () {
...
}

上のコードでは、名前付き関数hogeを定義しました。

しかし、無名関数はいきなりfunctionキーワードから始まる定義を書くことはできません。実際、以下のようなコードを書くとエラーが起こります。

function () {
...
}

その為、無名関数は必ず変数に代入するか、引数として指定することを覚えておいてください。

ちなみに、現在ではES2015から利用できるようになったアロー関数を使って、より簡単に記述することができるようになっています。次の記事で詳しくまとめているので合わせて参考にしてみてください。

まとめ

今回はJavaScriptにおける「無名関数」について解説しました。無名関数はとても便利で、JavaScriptプログラミングでは頻繁に出現するので覚えておいて損はありません。皆さんもこの記事を通して、無名関数についての知識をどんどん深めていってくださいね。