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

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

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

この記事では

  • 無名関数とは
  • 無名関数を使用するメリット
  • 無名関数の使い方

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

  • 即時関数とは
  • 無名関数を使用する際の注意点

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

無名関数とは

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

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

【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ!
更新日 : 2019年4月21日

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

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

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

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

無名関数の使い方

では、さっそく無名関数の使い方をご紹介したいと思います。無名関数は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と表示されたのが確認出来ましたね。

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

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

【JavaScript入門】変数のスコープを完全マスター!
更新日 : 2020年5月8日

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

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

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

function hoge () {
...
}

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

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

function () {
...
}

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

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

【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ!
更新日 : 2019年4月21日

まとめ

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。