違いをしっかりと意識するためにメモ
まずはfunction文とfunciton式の形式
//function文 function hoge(){ } //function式 var hoge = function(){ };
functionから始まる関数がfunction文、
式の中で関数を定義したものがfunction式です。
関数を定義するタイミング
//function文 console.log(hoge()); //pyo function hoge(){ var fuga = 'pyo'; return fuga; } console.log(hoge()); //pyo
function文の場合は実行された際に関数を先に定義。
つまり感覚的には上の式をこんな風に読み込んでいます。
//function文 function hoge(){ var fuga = 'pyo'; return fuga; } console.log(hoge()); //pyo console.log(hoge()); //pyo
そのためfunction文はコードのどこにあっても関数を呼び出すことができます。
//function式 //console.log(foo()); //error var foo = function (){ var bar = 'baz'; return bar; }; console.log(foo()); //baz
しかしfunction式になるとfunction式が来たところで関数を定義するようになるため、それより前で実行をするということができなくなります。
即時関数が(function(){});の理由
即時関数は関数を定義した段階で、その場で実行する方法です。
(function (){ var bar = 'baz'; console.log(bar); })();
function(){}をカッコで囲んで();を付けた形にするとその場で実行されます。
カッコを付ける理由はfunction文ではなくfunction式として扱うためです。
なのでこんな書き方もあり
var foo = function (){ var bar = 'baz'; console.log(bar); }();
function文の後ろに();を付けるとエラーになります。
function (){ var bar = 'baz'; console.log(bar); }();
これはfunction文はセミコロンを書かなくても}のところで文が終わったと解釈されるため
感覚的に書くとこんな感じ
function (){ var bar = 'baz'; console.log(bar); }; ();
なのでfunction文のままでは実行できないためカッコで囲うのです。
comment