web-dev-qa-db-ja.com

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

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

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

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

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

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

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

javascriptfunctionses6
12
user949300

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

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

11
dandavis

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]))
}
2
Wayne Bloss