ES6で機能を定義する適切な方法は？

Question

私はちょうどES6関数を正しく書く方法を考えています。私はそれが個人的な好みに依存していることを知っていますが、賛否両論は何ですか？

function foo() { 
    ... 
} 

対

const foo =() => { 
    ... 
}; 

対

const foo = function() { 
    ... 
}; 

対airbnbスタイルガイドは、後者をお勧めします

const foo = function bar() { 
    ... 
}; 

。しかし、1つの関数に2つの名前を定義するのは意味がありません。

Answer 1

関数宣言を使用すると、コード実行前にすべての関数が処理されるように、function declaration hoistingを扱うことになります。つまり、関数が定義される前に技術的に使用でき、機能表現で

foo(); //can be used before declaration appears! 

function foo() { 
    { //new block 
    function bar() { 
     alert(1); 
    } 
    } 
    bar(); //no problem, is function scoped 
} 
foo(); //alerts 1! 

を、何の巻き上げは行われません、あなたはletかconstを使用する場合はブロックのスコープを持っています：トン彼らは機能がスコープされるように、ブロックスコープを持つ

function foo() { 
    { //new block 
    const bar =() => { 
     alert(1); 
    } 
    } 
    bar(); //ReferenceError: Can't find variable: bar 
} 
foo(); 

最後に、関数式という名前のを使用すると、より良いデバッグのための単なる匿名関数ではなく、関数に名前を付けることができます。従って：最後の選択を好む。それはブロックスコープを予期しています（まだホイストしていますが、コード内で宣言する前にアクセスするのは無効です）。これによりデバッグの経験が向上します。

また、矢印の機能は自分自身のthisをバインドしませんが、囲むコンテキストのthisを忘れないようにしてください。関数宣言は、厳密モードでグローバルオブジェクトwindowまたはundefinedを参照すると常にthisとなります。

Answer 2

最初のものは、エラーを回避するという利点があります（hoisting）ので、その宣言の前に関数を使用することができます。

他のオプションを使用すると、そのポイントの前にあるため、宣言の後でのみ使用できます。だから私は最初のオプションが最も安全なものだと言います。