function hoge() と hoge = function() の違いは？


JavaScriptでの関数定義には2つあるみたいですが、違いや使い分けがわからないので教えて下さい。

パターン1

[code]

    function hoge(a, b) {
        ...
    }
    
[/code]

パターン2

[code]

    var hoge = function(a, b) {
        ...
    }
    
[/code]

どちらも実行するときは`hoge(a, b);`でよいのでしょうか。




両者の本質的な違いは、「式（`Expression`）」か「文（`Statement`)」かだと考えます。

# 関数定義式

パターン2の書き方は _関数定義式_ と呼びます。

[code]

    var hoge = function(a, b) {
        ...
    }
    
[/code]

JavaScriptには **巻上げ** という特異な仕様があり、実際には上の記述は以下のように分解されます。

[code]

    // varの宣言はスクリプトまたは関数の行頭で行われる（巻上げ）
    var hoge;
    // この時点でhogeへアクセスするとundefined
    hoge = function(a, b) {
        ...
    }
    
[/code]

また、ここで行われている処理は、匿名関数を変数`hoge`へ代入する処理です。`hoge()`で実行することはできますが、この関数自体が`hoge`という名前は持っていません。

名前を持たせるためには、以下のように宣言する必要があります。

[code]

    var hoge = function fuga(a, b) {
        // この中ではfuga()で再帰処理を書くことができる
        ...
    }
    // 外側ではhogeはfugaの名前を持つが、呼び出すときはhoge()を用いる
    hoge.name // => "fuga"
    
[/code]

# 関数宣言文

対して、パターン1の書き方は _関数宣言文_ と呼ばれます。

[code]

    function hoge(a, b) {
        ...
    }
    
[/code]

**文の巻上げは関数定義そのものに発生する** という特徴があり、その結果、スコープ内であればどこからでも呼び出すことができます。

また、関数宣言文で定義した関数は、必ず名前を持つという特徴があります。

