MENU

JavaScriptの関数は呼び出し順序を気にしなくてOK！

JavaScriptでは、関数の記述順序は実行順序に影響しません。
これは、JavaScriptが関数を“hoisting”（ホイスティング） という仕組みで扱うためです。
ホイスティングとは、簡単に言うと、 関数宣言と変数宣言が、コードの実行前にコードの先頭に “持ち上げられる” ようなイメージです。

つまり、関数の定義が呼び出しよりも後になっていても問題なく動作します。

サンプルコード

例1： 関数内での関数呼び出し

      function greet(name) {
  sayHello(); // sayHello関数を呼び出す
  console.log("こんにちは、" + name + "さん！");
}

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

greet("太郎"); 
// 出力:
// Hello!
// こんにちは、太郎さん！

content_copy Use code with caution.JavaScript

例2： 別ファイルの関数呼び出し

HTMLファイル (index.html)

      <script src="functions.js"></script>
<script src="main.js"></script>

content_copy Use code with caution.Html

functions.js

      function sayHello() {
  console.log("Hello from functions.js!");
}

content_copy Use code with caution.JavaScript

main.js

      sayHello(); // functions.js内の関数を呼び出す

content_copy Use code with caution.JavaScript

これらの例では、関数の呼び出しが定義よりも前に記述されていますが、問題なく動作します。

注意点

  • 関数式の場合: const myFunc = function() {} のような関数式の場合、ホイスティングは変数に対してのみ適用されます。 関数式自体は、定義された場所まで実行されません。
  • 変数のホイスティング: 変数の場合は、宣言のみがホイスティングされ、初期化は行われません。 つまり、宣言前に変数を参照しようとすると、undefined となります。

まとめ

JavaScriptでは、関数宣言の記述順序は実行順序に影響しません。
しかし、関数式や変数のホイスティングには注意が必要です。
コードを読みやすく、予期せぬエラーを防ぐためにも、関数や変数は使用する前に定義する習慣をつけると良いでしょう。

コラム