`function foo（）{}`の代わりに `const foo =（）=> {}`を使用する理由

たとえば、このReduxビデオでは、講師は常に次のような構文を使用します

const counter = (state=0, action) => {
   ... function body here
}

私は「伝統的な」だけを使用します

function counter(state=0, action) {
   ... function body here
}

これは実際には短く、IMOはより明確です。小さな「=>」の不規則な右端をスキャンするよりも、「関数」の単語をページのかなり均一で構造化された左端をスキャンする方が簡単です。

以外でthis、意見ではなく客観的になるようにしようとすると、newfangled構文にいくつかの有用な違いまたは利点がありますか？

関数ステートメント（名前が付けられた関数、2番目の構文が示されています）は、ifステートメントのように任意のブロックや制御ブロックの背後にあるステートメントであっても、完全な字句スコープの最上部まで引き上げられます。const（のようにlet）を使用して変数を宣言すると、ブロックスコープが与えられ、完全な巻き上げ（単なるブロックへの巻き上げ）が停止し、変数が再宣言されないことが保証されます。

スクリプトを連結したり、他のパッケージ作成ツールを使用したりする場合、関数のホイストは、サイレントに失敗するためデバッグが困難な方法で競合するスクリプトを壊す可能性があります。再宣言constすると、プログラムが実行される前に例外がスローされるため、デバッグがはるかに簡単になります。

これがあなたが使うべき理由ですfunction：

1. シグナリングは明確で簡潔です。これは、他の回答に記載されているエッジケースの巻き上げの懸念よりもはるかに有益です。

2. 以下のコードからわかるように、暗黙のconstうちにtryDoTheThing失敗の宣言が失敗し、それを呼び出そうとするまでキャッチされないため、実際にはモジュール内でホイストする必要があります。

3. 私が接触したほとんどのジュニアconstは、タブの上にスペースを使用したりfunctional!!!、「OOPが悪い」ためにすべてを作成したりするなど、今は流行なので、すべての関数を宣言し始めます。それをしないでください。あなたはその影響を完全に理解せずに流行を追うその人になりたくありません。

https://gist.github.com/stephenjfox/fec4c72c7f6ae254f31407295dc72074経由

/*
This shows that, because of block-scoping, const function references must be
invoked in-order or else things will fail silently.
const's are added the name space serially (in the order in which they appear)
and much of the body isn't declared when we first try to invoke or functions
*/


const tryDoTheThing = () => {
  console.log(`This is me trying to be awesome ${getAwesome()}`)
}


// "getAwesome is not defined", because it is referenced too early
tryDoTheThing() // comment to see the rest work


const getAwesome = () => (+((Math.random() * 10000).toString().split('.')[0]))


const doTheThing = () => {
  console.log(`This is awesome! ${getAwesome()}`)
}

doTheThing() // prints

対

/*
Function declarations are given two passes, where the first lifts them to
the top of the namespace, allowing "out of order" usage
*/

doTheThing();


function doTheThing() {
  console.log(`This is awesome number ${getAwesome()}`)
}

function getAwesome() {
  return (+((Math.random() * 10000).toString().split('.')[0]))
}