Zenn
🐩

[JavaScript]関数宣言 と 関数式 の違いについて（備忘録）

2025/01/26に公開
2件
JavaScript
初心者
メモ
tech

１．関数宣言とは

・function を使用した関数定義方法を、関数宣言といいます。

関数宣言を使用した関数定義例
// 関数宣言
function 関数名() {
    // 処理内容
}

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

２．関数式とは

・function を変数に代入する関数定義方法を、関数式といいます。
・関数名を記述する必要がないので、無名関数や匿名関数とも呼ばれています。
・関数式で宣言した変数名を使って、関数を呼び出します。

関数式を使用した関数定義例
// 関数式
const 変数名 = function () {
    // 処理内容
};

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

３．関数宣言 と 関数式 の違い

〇重複した場合

  • 関数宣言名が重複
Sample_1.js
function retest() {
    console.log('テスト_1');
}

// 重複した関数宣言
function retest() {
    console.log('テスト_2');
}

retest();
実行結果
テスト_2
  • 関数式名が重複
Sample_2.js
const retest = function() {
    console.log('テスト_1');
};

const retest = function() {
    console.log('テスト_2');
};

retest();
実行結果
'retest' has already been declared
  • 関数宣言名と関数式名が同じ
Sample_3.js
function retest() {
    console.log('テスト_1');
}

const retest = function() {
    console.log('テスト_2');
};

retest();
実行結果
'retest' has already been declared

〇関数呼び出し文の記述箇所

  • 関数宣言の上に関数呼び出し文を記述
Sample_4.js
test();

function test() {
    console.log('テスト');
}
実行結果
テスト
  • 関数式の上に関数呼び出し文を記述
Sample_5.js
test();

const test = function() {
    console.log('テスト');
};
実行結果
ReferenceError: Cannot access 'test' before initialization

４．まとめ

個人的な経験談にはなりますが、可読性や保守性の観点から関数宣言を使用してプログラムを作成している案件が多かったです。
とはいえ、関数式と関数宣言のどちらも使いこなせるのが一番良いです。。。

  • 補足：

関数の中で関数宣言を書く時は return のあとに書いてすっきりさせることが多いですね

上記のアドバイスを頂いたので、サンプルプログラムを作成しました。

Sample_1.js
// 関数式_1
const ShowMsg = function () {
    // 関数宣言
    return function createMessage(msg) {
        return `Hello, ${msg}!`;
    }
};

// 関数式_2
const result = ShowMsg();

console.log(result('EveryOne'));
実行結果
Hello, EveryOne!

５．参考

・関数式
・JavaScript:関数宣言と関数式どちらを使えば良い？
・【JavaScriptの基本】関数宣言と関数式の違い

６．その他

・実行環境

Discussion

junerjuner

関数の中で関数宣言を書く時は return のあとに書いてすっきりさせることが多いですね。