JavaScriptにおける「var functionName = function(){}」と「function functionName(){}」の違いを徹底解説

はじめに：2つの関数定義方法

JavaScriptには、関数を定義する方法が主に2つあります。1つは関数式、もう1つは関数宣言です。一見するとどちらも同じように動作するように見えますが、実際には重要な違いがあります。

• var functionName = function() {}; → 関数式（無名関数・匿名関数）
• function functionName() {} → 関数宣言

関数宣言とは

function functionName() {} の形式で書かれたものは「関数宣言」と呼ばれます。関数宣言の最大の特徴は、ホイスティング（巻き上げ）が行われる点です。つまり、コード内で宣言より前の位置からでも関数を呼び出すことができます。

これは、JavaScriptエンジンがコードを実行する前に、まずすべての関数宣言を読み込んで登録しておくためです。周囲のスコープが実行された時点で、その関数はすでに定義済みの状態になっています。

// 宣言より前に呼び出しても正常に動作する
functionDisplayTwo();

function functionDisplayTwo() {
  console.log("Hello!");
}

上記のコードは、functionDisplayTwo() の呼び出しが関数宣言よりも前に書かれていますが、ホイスティングによって問題なく実行され、「Hello!」が出力されます。

関数式とは

一方、var functionName = function() {}; の形式は「関数式」と呼ばれます。この場合、function() {} の部分には名前がないため、匿名関数（無名関数）として変数に代入されています。

関数式の場合、変数自体の宣言はホイスティングされますが、関数としての代入はホイスティングされません。そのため、代入文が実行される前に呼び出そうとすると、エラーが発生します。

// エラーになる例
functionDisplayOne(); // TypeError: functionDisplayOne is not a function

var functionDisplayOne = function() {
  console.log("Hello!");
};

// 代入後に呼び出せば正常に動作する
functionDisplayOne(); // "Hello!" と出力される

このように、関数式を使う場合は必ず代入が完了した後に関数を呼び出す必要があります。

両者の違いまとめ

使い分けのポイント

関数宣言は、プログラム全体で共通して使うユーティリティ関数など、どこからでも呼び出せるようにしたい場合に便利です。一方、関数式は、条件に応じて異なる処理を変数に代入したり、コールバック関数として渡したりする場面で活躍します。

また、現代のJavaScriptでは let や const を使った関数式や、アロー関数（() => {}）も広く利用されており、これらも同様に「代入後にしか使用できない」という特性を持っています。意図しないバグを防ぐためにも、両者の違いを正しく理解して使い分けることが重要です。