JavaScriptの関数実行タイミングについて

B4のktaroです.

２回目の投稿になります。今回はJavaScriptの関数実行タイミングについての記事を書こうと思います。

では、さっそく・・・

JavaScriptにはいくつかの関数定義方法があります.

一つ目は、

function hoge(){}     

二つ目は、

var fuga = function(){};     

今回はこの二つの関数について話をしたいと思います。

まず一つ目の関数を実行させてみたいと思います。

 hoge();
 function hoge(){
  alert('ふぇぇ');
 }

「ふぇぇ」とアラートで表示されました。 ここで、「なんで関数定義より前で実行しているのにアラートが表示されたんだ？」と思った方。 JavaScriptには、ホスティング(巻き上げ)という機能があり、変数や関数がトップに巻き上げられるのため、関数が実行できたというわけです。

では次に、二つ目のソースコードをホスティングを利用して実行してみます。

fuga();
var fuga = function(){
 alert('ふぇぇ');
};

今回は実行されずに、コンソールにエラーが表示されてしましました。

先ほど記述したホスティングは変数や関数を巻き上げます。つまり今回のソースコードは、

var fuga;
fuga();
fuga = function(){
 alert('ふぇぇ');
};

というソースコードと同じになります。これでは、関数を実行することができません。

今回のように、JavaScriptには関数実行のタイミングが関数の定義の仕方によって異なります。

JavaScriptで関数を定義する際は、実行のタイミングをしっかり考えてから定義しましょう。今回は以上で終わります。ありがとうございました。