プログラムを書いていくと、処理をまとめて管理したい時や、再利用したい時があります。このような場面で活躍するのが関数です。
しかし、JavaScriptの関数には、いくつか種類がありそれぞれ構文が異なります。

本記事では、JavaScriptで良く使われる関数宣言と関数式の構文を紹介し、それらの違いについても取り上げていきます。

関数

関数とは、処理をまとめて定義し、再度利用できるように管理している機能です。英語で「function」と呼ばれています。

プログラムが大きくなってくると、同じ内容の処理を複数の箇所で使いたい場面があります。
その際に同じ処理を繰り返し記述することは可能ですが、コードが長くなることにより可読性が低くなってしまいます。
また、処理内容を変更したい場合に、すべての処理の箇所で変更が必要となり、非常に非効率です。

そのような煩雑な管理を防ぐために、処理を関数という形でまとめて定義し、必要な箇所でその関数を呼び出します。
そうすることで、あらゆる箇所で同じ処理を使うことが可能になり、変更点が生じた際にも変更の手間が掛からなくなります。

関数の構文

JavaScriptで扱われている一般的な関数は、「関数宣言」「関数式」「関数コンストラクタ」の3種類です。

順番に見ていきましょう。

関数宣言

以下のようなfunctionキーワードを使った関数定義方法を関数宣言と言います。
関数宣言は、もっとも基本的な関数定義のため、一度は見たことがあるかもしれません。

function 関数名() {
  実行する処理;
}

関数名(); // 関数の呼び出し

冒頭のfunctionは、関数であることを示すための予約語となるため、必ず記述が必要です。
関数名には、関数の役割を表す名前を簡潔に付けます。
また、ブロック{}の外に関数名()を記述することで、関数を呼び出すことができます。

実際に関数宣言を書いてみると以下のように書くことができます。

function showMessage() {
  console.log('Hello');
}

showMessage(); // 'Hello'

関数式

次のように、変数に代入して関数定義を行う構文を関数式と呼びます。

let 変数名 = function() {
  実行する処理
};

変数名();

関数宣言と同様にfunctionキーワードを用いて、変数に代入します。
関数名を記述する必要がないため、無名関数や匿名関数とも呼ばれています。
関数式で宣言した変数名を使って関数を呼び出します。

関数式は、このように書くことができます。

let showMessage = function() {
  console.log(’Hello’);
};

showMessage(); // 'Hello'

関数コンストラクタ

ここでは、関数コンストラクタも補足として紹介します。
次のように、new演算子を使用して関数定義を行う方法を関数コンストラクタと呼びます。

let 変数名 = new Function('引数', ..., '実行する処理');

変数名();

しかし、関数コンストラクタは動作が遅く、記述も分かりにくいため、前述の関数宣言や関数式よりもメリットは見えにくいです。
ここでは、最低限の知識として知っておけば良いでしょう。

実際に関数コンストラクタを使うと、このように書くことができます。

let showMessage = new Function('greeting', 'console.log(greeting)');

showMessage('Hello'); // 'Hello'

関数宣言と関数式の違い

関数宣言と関数式には、上記で紹介したような構文の違いはありますが、機能面での違いはあるのでしょうか。
それには、関数が生成されるタイミングに注目すると良いでしょう。

関数宣言の場合を見てください。

showMessage(); //'Hello'

function showMessage() {
  console.log('Hello');
}

関数宣言は、JavaScriptがスクリプトやコードブロックを実行するまでに、関数オブジェクトを生成します。つまり、関数宣言が処理されてから実行が続けられるということです。
そのため、定義された関数の前で関数を呼び出すことができます。

一方で、関数式の場合はこのようになります。

showMessage();
// 'Uncaught ReferenceError: Cannot access 'showMessage' before initialization'

let showMessage = function() {
  console.log('Hello');
};

関数式は、その式が実行されるときに関数オブジェクトを生成するため、定義された関数の前で関数を呼び出すとエラーを起こします。
そのため、関数式の定義の後に、関数を呼び出す必要があるということです。

複雑な関数の場合には、関数宣言と関数式のパフォーマンスに違いが出てくる場合があります。
しかし、普段使用するうえでは気にする必要はないため、書きやすいと感じる方を選ぶと良いでしょう。

まとめ

今回は、関数宣言と関数式の構文とそれらの違いについて解説しました。

関数にはさまざまな書き方があるように、現場によっても使われる関数が変わります。
まずは、それぞれの関数の書き方を覚えていきましょう。

 関数構文の関連記事

関数と宣言
関数式
アロー関数と従来の関数の違い