🔖

関数宣言と関数式の違いとホイスティングについて

2024/06/05に公開

関数宣言 (Function Declaration)

関数宣言はfunctionで関数を定義します。
これはホイスティングされます。つまり、スクリプト全体のどこでもこの関数を呼び出すことができます
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function

console.log(example());

function example() {
  return "Hello, world!";
}

関数式 (Function Expression)

関数式はconstやletを使って変数に関数を代入することで関数を定義します。
これはホイスティングされません。変数の初期化はスクリプトの実行段階で行われるため、関数式を使った関数は宣言後にのみ呼び出すことができます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function

下記の場合は動作しません。

console.log(example());

const example = () => {
  return "Hello, world!";
}

ホイスティング(Hoisting)

変数宣言や関数宣言が実際のコード実行前にそのスコープのトップに持ち上げられる(hoistされる)ように見える現象を指します。
https://developer.mozilla.org/ja/docs/Glossary/Hoisting

関数をホイスティングした場合は、スクリプト全体のどこでもこの関数を呼び出すことができるということです。

変数をホイスティングした場合は、スクリプト全体のどこでもこの関数を呼び出すことができませんので注意してください。

終わりに

何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉

Discussion