初めに

javascriptを学習していて疑問に思っていた関数と関数式について学習した内容をまとめてみました。両方の違いから関数式が推奨される理由についても考えてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

関数宣言とは

関数宣言（function declaration）とは一般的にjavascriptで関数を使用するために、処理したい内容を記述していつでも呼び出せるように定義することです。無名関数や即時関数、アロー関数など形によっていくつか種類があります。

関数式とは

関数式（function expression）とは定義した関数を変数や定数に代入したものです。

関数宣言と関数式の違いは？

一見、同じように見える関数宣言と関数式ですが、「巻き上げ」が起こるかの違いがあります。「巻き上げ」とは関数を宣言する前からでも関数を呼び出すことが出来るということです。

❶関数宣言の場合

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

//関数宣言
function test() {
  document.write("テストです!");
}

実行結果

このように関数を先に呼び出してから関数を宣言しても関数が実行されてしまいます。

❷関数式の場合

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

//関数式を定義
const test = function test() {
  document.write("テストです!");
};

実行結果

ブラウザーが真っ白で何も出力されないのが分かります。このように関数式は「巻き上げ」が起こりません。つまり定義した後からでないと呼び出して実行されません。

「巻き上げ」はバグの元になる&原因探しが難しい

関数宣言の場合、後から宣言しても関数が実行されてしまいます。便利そうに見えますが、バグの原因になる可能性があります。昔よく使われていた変数宣言の「var」が非推奨になり、「let」を使うようになったのと同じです。また、宣言された関数を探すのが難しくなるので、バグの修正に時間と手間が掛かってしまいます。googleでも「関数式」を使うようにとコーディングルールで決まっているようです。

参考記事

https://www.fenet.jp/dotnet/column/language/3161/
https://www.yamagome.net/journal/8cb45a-javascript-%E9%96%A2%E6%95%B0%E5%BC%8F-%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88
https://it-biz.online/web-design/function-expression/