JS--関数の記述位置について

関数の記述位置について

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【関数の記述する位置】
一般的には関数を先に定義しておき、そのあとで関数を呼び出すように記述されるケースが多いですが、関数の定義をあとに記述しても問題はありません。

 

サンプル1

function dispTotal(x,y){

  return x + y ;

}

 

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

>7

 

サンプル2

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

 

function dispTotal(x,y){

  return x + y ;

}

 

>6

 

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

 

【HTMLの中で記述する場合】

＜！DCTYPE　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＞

実行すると、エラーが表示される
> ReferenceError: dispGoal is not defined

これは、dispGoal 関数を定義する前に、dispGoal 関数を呼び出したからだ。

これを次のように変更する

 

＜！DCTYPE　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

関数の定義が関数の呼び出しよりも後に記述しても問題ないですが、 <script> タグが分かれている場合は関数の定義は関数の呼び出しよりも先に記述されていないとエラーとなります

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

サンプル

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

  dispGood();//関数内関数
}

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

dispHello();
> Hello
> Good

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

サンプル

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

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

dispHello();
dispBye();

> Hello
> ReferenceError: dispBye is not defined