関数と関数の呼び出しを記述する位置について

JavaScript において関数と関数の呼び出しをプログラムの中で記述する位置について解説します。関数の定義は関数の呼び出しよりも前でも後でも大丈夫ですが、 HTML ページ内に記述する場合は注意する点があります。また関数がグローバルスコープではなく別の関数の中で定義された場合の注意点についても併せて解説します。

(Last modified: 2024-09-16)

関数を記述する位置
HTMLページの中に記述する場合
関数の中に記述した関数を呼び出す場合

関数を記述する位置

プログラムの中で関数と関数を呼び出す側をどちらを先に記述すればいいのかについて、どちらから先に記述しても問題ありません。一般的には関数を先に定義しておき、そのあとで関数を呼び出すように記述されるケースが多いですが、関数の定義をあとに記述しても問題はありません。

次の二つの簡単なサンプルを見てください。

function dispTotal(x, y){
  return x + y;
}

console.log(dispTotal(3, 4));
>> 7

console.log(dispTotal(5, 1));

function dispTotal(x, y){
  return x + y;
}

>> 6

関数の定義を関数の呼び出しよりも先に書いている場合も、後に書いている場合も問題なく関数を呼び出すことができています。

関数の定義を関数を呼びだす前に記述できるのは function キーワードを使って関数を定義している場合だけです。関数リテラルを使って関数を定義する場合は呼び出す前に関数を定義しておく必要があります。詳しくは「関数リテラルを使って関数を定義する(無名関数)」を参照されてください。

HTMLページの中に記述する場合

HTML ページの中に JavaScript を記述する場合は注意が必要です。次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>

<script>
function dispStart(){
  console.log('Start');
}
</script>

</head>
<body>

<p>
JavaScript のサンプルです。
</p>

<script>
dispStart();
dispGoal();
</script>

<p>
ここまでです。
</p>

<script>
function dispGoal(){
  console.log('Goal');
}
</script>

</body>
</html>

ヘッダー部分および本文の中にそれぞれ関数を定義し、同じ本文内から関数を呼び出しています。関数と関数を呼び出す側はそれぞれ別の <script> タグの中に記述しています。

このページをブラウザで表示してみると、コンソールに ReferenceError: dispGoal is not defined というエラーが出力されました。

>> ReferenceError: dispGoal is not defined

先ほどのサンプルを修正し dispGoal 関数の定義を関数の呼び出しよりも前に移動してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>

<script>
function dispStart(){
  console.log('Start');
}
</script>

</head>
<body>

<script>
function dispGoal(){
  console.log('Goal');
}
</script>

<p>
JavaScript のサンプルです。
</p>

<script>
dispStart();
dispGoal();
</script>

<p>
ここまでです。
</p>

</body>
</html>

このページをブラウザで表示してみると、今度はエラーが発生せずにプログラムが実行されました。

>> Start
>> Goal

先ほどのサンプルを修正し今度は dispGoal 関数の定義を関数の呼び出しよりも後だけれど、同じ <script> タグ内に移動してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>

<script>
function dispStart(){
  console.log('Start');
}
</script>

</head>
<body>

<p>
JavaScript のサンプルです。
</p>

<script>
dispStart();
dispGoal();

function dispGoal(){
  console.log('Goal');
}
</script>

<p>
ここまでです。
</p>

</body>
</html>

このページをブラウザで表示してみると、この場合もエラーが発生せずにプログラムが実行されました。

>> Start
>> Goal

このように HTML ページ内に JavaScript のコードを記述する場合、関数の定義が関数の呼び出しよりも後に記述しても問題ないですが、 <script> タグが分かれている場合は関数の定義は関数の呼び出しよりも先に記述されていないとエラーとなりますのでご注意ください。

関数の中に記述した関数を呼び出す場合

JavaScript では呼び出す関数がグローバルスコープで定義されていれば、関数の中から別の関数を呼び出すことができます。

function dispHello(){
  console.log('Hello');

  dispGood();
}

function dispGood(){
  console.log('Good');
}

dispHello();

>> Hello
>> Good

呼び出す関数が別の関数内で定義されている場合は、同じ関数内からであれば呼び出すことができます。

function dispHello(){
  console.log('Hello');

  function dispBye(){
    console.log('Bye');
  }

  dispBye();
}

dispHello();

>> Hello
>> Bye

呼び出す関数が別の関数内で定義されている場合、関数の外から呼び出そうとすると ReferenceError: dispBye is not defined というエラーとなります。

function dispHello(){
  console.log('Hello');

  function dispBye(){
    console.log('Bye');
  }
}

dispHello();
dispBye();

>> Hello
>> ReferenceError: dispBye is not defined

このように関数を呼び出す場合、呼び出す関数がグローバルスコープで定義されている場合はプログラムのどこからでも呼び出すことができますが、関数内で定義された場合はその関数内からしか呼び出すことはできません。

-- --

JavaScript において関数と関数の呼び出しをプログラムの中で記述する位置について解説しました。

( Written by Tatsuo Ikura )

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。