違いをしっかりと意識するためにメモ
まずは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