es6の矢印関数でいつ「return」を使用する必要がありますか？

新しいes6矢印関数returnは、状況によっては暗黙的であると言います。

式は、その関数の暗黙的な戻り値でもあります。

returnes6の矢印関数でどのような場合に使用する必要がありますか？

ジャクソンは同様の質問で部分的にこれに答えました：

暗黙的な戻り。ただし、ブロックがない場合のみ。

• これにより、ワンライナーが複数行に展開され、プログラマーがを追加し忘れた場合にエラーが発生しreturnます。
• 暗黙的なリターンは構文的にあいまいです。(name) => {id: name}オブジェクトを返します{id: name}...そうですか？違う。戻りますundefined。これらの中括弧は明示的なブロックです。id:ラベルです。

これにブロックの定義を追加します：

ブロックステートメント（または他の言語の複合ステートメント）は、0個以上のステートメントをグループ化するために使用されます。ブロックは、中括弧のペアで区切られます。

例：

// returns: undefined
// explanation: an empty block with an implicit return
((name) => {})() 

// returns: 'Hi Jess'
// explanation: no block means implicit return
((name) => 'Hi ' + name)('Jess')

// returns: undefined
// explanation: explicit return required inside block, but is missing.
((name) => {'Hi ' + name})('Jess')

// returns: 'Hi Jess'
// explanation: explicit return in block exists
((name) => {return 'Hi ' + name})('Jess') 

// returns: undefined
// explanation: a block containing a single label. No explicit return.
// more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label
((name) => {id: name})('Jess') 

// returns: {id: 'Jess'}
// explanation: implicit return of expression ( ) which evaluates to an object
((name) => ({id: name}))('Jess') 

// returns: {id: 'Jess'}
// explanation: explicit return inside block returns object
((name) => {return {id: name}})('Jess') 

私はこの経験則を理解しています...

効果的に変換される関数（引数の1行の操作）の場合、戻り値は暗黙的です。

候補者は次のとおりです。

// square-root 
value => Math.sqrt(value)

// sum
(a,b) => a+b

その他の操作（ブロックを必要とする複数のライナーの場合、戻りは明示的でなければなりません

ここに別のケースがあります。

Reactで機能コンポーネントを作成する場合、括弧を使用して暗黙的に返されたJSXをラップできます。

const FunctionalComponent = () => (
  <div>
    <OtherComponent />
  </div>
);

矢印関数を使用すると、暗黙の戻り値を取得できます。値は、 return。キーワード。

関数本体にオンラインステートメントがある場合に機能します。

const myFunction = () => 'test'

console.log(myFunction()) //'test'

オブジェクトを返す別の例（ラッピング関数の本体の括弧と見なされないように、中括弧を括弧で囲むことを忘れないでください）：

const myFunction = () => ({value: 'test'})

console.log(myFunction()) //{value: 'test'}

ここに私にいくつかの問題を引き起こした別のケースがあります。

// the "tricky" way
const wrap = (foo) => (bar) => {
  if (foo === 'foo') return foo + ' ' + bar;
  return 'nofoo ' + bar;
}

ここでは、無名関数を返す関数を定義します。「トリッキー」なビットとは、外側の関数（（bar）=> ...で始まる部分）の関数本体が視覚的に「ブロック」のように見えることですが、そうではありません。そうではないので、暗黙のリターンが始まります。

wrapの実行方法は次のとおりです。

// use wrap() to create a function withfoo()
const withfoo = wrap('foo');
// returns: foo bar
console.log(withfoo('bar'));

// use wrap() to create a function withoutfoo()
const withoutfoo = wrap('bar');
// returns: nofoo bar
console.log(withoutfoo('bar'));

これを開梱して、機能を「絞り込んでいない」ことを確実に理解した。

以下は、最初のコードブロックのセマンティックに相当するもので、単にwrap（）の本体に明示的な戻りを行わせます。この定義は、上記と同じ結果になります。ここが点のつながりです。上記の最初のコードブロックと以下のコードブロックを比較すると、矢印関数自体がブロックではなく式として扱われ、暗黙のreturnがあることがわかります。

// the explicit return way
const wrap = (foo) => {
  return (bar) => {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  }
}

完全に縮小されていないラップのバージョンは次のようになります。これは、太い矢印が付いたバージョンほどコンパクトではありませんが、理解するのがはるかに簡単です。

// the "no arrow functions" way
const wrap = function(foo) {
  return function(bar) {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  };
};

結局、私のコードを読まなければならないかもしれない他の人、そして将来の私にとっては、かなりの時間がかかる矢印よりも、一目で視覚的に理解できる非矢印バージョンの方が好きだと思いますグロックと思った（そして私の場合は実験）。