関数宣言と関数式の違い | 関数定義 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

関数とは？

JavaScriptでは、関数はコードの再利用や構造化されたプログラムを作成するための重要な要素です。関数を定義する方法には、主に「関数宣言」と「関数式」の2つの方法があります。これらは見た目が似ていますが、動作や利用シーンにおいて違いがあります。

関数宣言とは？

関数宣言は、関数を宣言する最も一般的な方法です。関数名を付けて関数を定義し、その関数をどこからでも呼び出すことができます。関数宣言は、ホイスティングという特性により、宣言前に呼び出すことが可能です。

関数宣言の例

function greet() {
    console.log("Hello, World!");
}

greet();  // "Hello, World!" を出力

この例では、greetという名前の関数が宣言され、その後に呼び出されています。関数宣言はプログラムのどの位置にあっても、呼び出しが可能です。

関数式とは？

関数式は、関数を変数に代入して定義する方法です。関数式は、無名関数（名前を持たない関数）が使われることが多く、関数を直接変数に代入します。関数式はホイスティングされないため、定義よりも前に呼び出すことはできません。

関数式の例

const greet = function() {
    console.log("Hello, World!");
};

greet();  // "Hello, World!" を出力

この例では、関数が変数greetに代入されています。関数式の場合、greetという変数が定義されるまで、関数を呼び出すことはできません。

ホイスティング（Hoisting）とは？

ホイスティングは、JavaScriptの特性の1つで、関数や変数の宣言がスコープの最上部に持ち上げられる（ホイストされる）というものです。関数宣言はホイスティングされるため、宣言より前に呼び出すことができますが、関数式はホイスティングされないため、定義後にしか呼び出せません。

ホイスティングの例

greet();  // "Hello, World!" を出力

function greet() {
    console.log("Hello, World!");
}

この例では、関数宣言greetは、実際の定義より前に呼び出されていますが、問題なく動作します。これはホイスティングによるものです。

ホイスティングがない関数式の例

greet();  // エラー: greet is not defined

const greet = function() {
    console.log("Hello, World!");
};

この例では、greetを関数式で定義していますが、定義前に呼び出すとエラーになります。関数式はホイスティングされないため、定義後にしか使用できません。

関数宣言と関数式の比較

関数宣言と関数式の違いをまとめた表を見てみましょう。

関数宣言 関数式
関数名を使って宣言する。 関数を変数に代入して定義する。
ホイスティングされるため、宣言前に呼び出せる。 ホイスティングされないため、定義後にしか呼び出せない。
関数に名前を付ける。 無名関数が使われることが多い。

まとめ

JavaScriptでは、関数を定義する方法として「関数宣言」と「関数式」の2つの方法があります。関数宣言はホイスティングされるため、プログラムのどの位置からでも呼び出せます。一方、関数式は変数に関数を代入して定義するため、定義後にしか使用できません。関数をどのタイミングで呼び出したいかに応じて、これらを使い分けることが重要です。

スポンサーリンク