【JavaScript】関数式（無名関数）とは？関数宣言との違いを3分で解説

このページでは、JavaScriptの関数式について初心者向けに分かりやすく解説します。

JavaScriptで関数を用いる場合は以下の２通りのパターンが存在します。１つが、function命令を用いた「関数宣言」。もう１つが、関数を変数に値として代入する「関数式」です。

このページで学べる内容

本ページの内容を理解する上で必要となる前提知識も本ページにすべて記載しております。JavaScript勉強中の方であれば、絶対に知っておきたい超・重要知識ですので、是非最後までご覧ください。

【前提】関数宣言とは？―function文

関数宣言は、その名の通りfunction文を用いて関数を宣言する方法です。宣言した関数は、後から直接「関数名」を記述することで実行されます。

関数宣言 (function declaration)

関数宣言は、「function 関数名」で関数を定義し、「関数名」で関数を呼び出す方法です。

See the Pen function1 by ビズドットオンライン (@BizOnline) on CodePen.

詳しくは、こちらの記事で解説しております。関数式を学習するまえに、まずは基本となる「関数宣言」についてマスターしておくことをおすすめします。

対して、関数式とは変数（もしくは定数）に関数を値として代入し、後からその変数を呼び出すことで関数を間接的に利用する方法です。

関数式 (function expression)

let（変数宣言命令）を用いて、関数を値として変数「sample」に代入します。

関数を呼び出す際は、変数「sample」を呼び出すことで、間接的に関数が呼び出されます。

See the Pen 関数式 by ビズドットオンライン (@BizOnline) on CodePen.

関数宣言(function declaration)と関数式(function expression)の大きな違いは、関数名を必須とするかどうか？という点です。

関数宣言と関数式。両方の場合のコードをもう１度見てみましょう

サンプルコード：関数宣言

//function（関数）の定義
function test(){
  document.write( 'Hello World!' );
}

//function（関数）の呼び出し
test();

上記のように、必ずfunctionの後ろに「関数名」を指定する必要があります。もし、ここで関数名を指定しない場合は、構文エラーとなり関数が正常に定義されません。

対して、関数式(function expression)の例を見てみましょう。

サンプルコード：関数式

et sample = function () {
  document.write( "Hello World!" );
}

sample();

関数式の場合は、functionの後ろに関数名を指定しなくてもOK。

この場合、関数名が定義されないので、この関数を「無名関数（もしくは匿名関数）」と呼びます。「無名関数」とは、その名の通り名前がない関数という意味なのです。簡単ですね。

※ちなみに、もちろん関数式の場合でも関数名を指定することは可能です。（以下のコードはエラーになりません。）

et sample = function sample2 () {
  document.write( "Hello World!" );
}

sample();

ただし、特殊な事情がない限り、わざわざ関数名を指定する必要はありません。基本的には、関数式を利用する際には、関数名を定義しない無名関数を利用する方針でOKです。

無名関数の大きなメリットは、関数利用時に名前を考える必要がないということです。

実際にコーディングをしていくようになれば分かりますが、この名前を付けるという作業は結構面倒なのです。「短く」「分かりやすい」名称の関数を考えるだけで、初心者コーダーほど時間を奪われがちです。

ただし、関数の中には名前を付けるほどでもない些細な処理しか行わない関数もあるのは事実。無名関数の大きな存在意義はここにあると言えます。

最後に、関数宣言と関数式の知っておくべき重要な違い「巻き上げの有無」について解説します。

関数宣言と関数式の巻き上げについて

巻き上げとは、JavaScriptでプログラムの読み込み順序が逆転する現象のことです。

通常、プログラムは「上から下へ実行」されるのですが、一部例外があり下の方に書かれている内容から実行される場合があります。

サンプルコード：巻き上げ

関数宣言の場合、関数の実行文を先に記述しても問題なく実行されます。

これは、巻き上げが発生しているためです。つまり、JavaScriptが自動的に「関数宣言（function文）」を先に読み込んでいるということ。

See the Pen 関数式―巻き上げ by ビズドットオンライン (@BizOnline) on CodePen.

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。