違いをしっかりと意識するためにメモ まずは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文のままでは実行できないためカッコで囲うのです。