return文はOKです

お久しぶりです.私は新しいファンシーな主題を持っています.そして、非常にコードスタイルに関連します、したがって、開発者が議論する主題はそうします.この記事を書く私の動機は、私が最近CodeBaseで見つけたESPINTルールです.arrow-body-style . そこで、式ベースの矢印関数で“return”文を使用するか、使用しないことについて話します.


明示的リターンに対する引数
私たちがなぜこのような理由を持っているのか、私たちに教えてください.

明示的戻り値は読み込みができません.
JSはリターン文を持っています.arrow functions それを使用しないために、我々は魔法のようにそれなしでJSの言語を作ることはできません.なぜ?私たちには文があります、そして、私たちがそれらを使用する必要があるとき、私たちはreturn文も使用する必要があります.
以下の2つのコード例を考えてみましょう.

let hateReturn = (user) => (
  hasDog(user) ? "Dog lover" : "Cat lover";
)

let returnIsOk = (user) => {
  return hasDog(user) ? "Dog lover" : "Cat lover";
}

読みやすさという点では違いがありますか.何の違いもないと思います.あなたは、「リターン」が非常にこのコードをより悪くすると思いますか?そうは思わない.あなたは、2番目の形がどうにか禁止されなければならないと思いますか?そうでない.

矢印関数は一貫していなければならず、
はい、素晴らしいが、それも可能ですか?別の機能を加えましょう.

let hateReturn = (user) => (
  hasDog(user) ? "Dog lover" : "Cat lover";
)

let returnOk = (user) => {
  return hasDog(user) ? "Dog lover" : "Cat lover";
}

let anotherReturnOk = (user, max) => {
  const distance = calculateDistance(user);
  if (distance > max) {
    return "Too far";
  } else {
    return "Close enough";
  }
}

どのようにこれらの3つの機能を一緒に見ますか?どちらが構文で一貫していますか?最後の2つのようなルックスは同じブラケットを持っています.そして、同じ形の戻ります、そして、hatereturnはカーリーブラケットを持っていません、しかし、丸いもの、それは戻りも持ちません.
すべての関数がreturn文を持たない可能性はありません.そして、かすかな括弧とリターンでそれらのいくつかを確かに持っているために、そして、それらのいくつかは丸いものでコードを一貫させません.

Note Yes you can ho hardcore and make you own language by creating all statements as expressions, but we don't talk about such ;)

Note Yes we can use standard function declaration and not be bothered by arrow functions. Then there is no choice to make.

“return”にはもっとコードがあります
そうですね.

リターンのない矢印はクールです
はい、彼らは…


明示的リターンの引数
今すぐカウンターアタック.注意しなさい.

暗黙のリターンによる柔軟性問題

どのような機能は、追加のロジックを含める必要がある場合は?条件式を保つことで暗黙のリターンを維持しようとすることができます.

let hateReturn = (user) => (
  hasDog(user) 
    ? "Dog lover" 
    : hasCat(user) 
      ? "Cat lover"
      : "No animals"
)

さらに私たちがこれを読むことができる書式設定を見てください.悪い?私はそれがそうであると思いません、しかし、私がそれをより明白にするならば、3進の代わりに「if」を使ってください?(残念なことに、関数を書き直して明示的に戻ります.

let returnIsOk = (user) => {
  if (hasDog(user)) {
    return "Dog lover"
  } 
  if (hasCat(user) {
    return "Cat lover"
  }
  return "No animals"
}

ここでは「アーリーリターン」というテクニックを使った.そして再び2番目のバージョンは最悪ですか?そうは思わない.そして、それはternariesを目指して怒らないです、いいえ、それは我々が暗黙のリターンでより柔軟でないことを示します、そして、我々はそれを保つために多くの体操をする必要があります.

追加変数
代入はステートメントです.したがって、戻り値なしでは矢印関数で使用できません.つのコード例を考えます.

let hateReturn = (user) => (
  user.dogs + user.cats > 5 && user.flat_size < 50 
    ? "Cannot have more animals" 
    : "Can have more animals"
)

let returnIsOk = (user) => {
  const manyAnimals = user.dogs + user.cats > 5;
  const smallFlat = user.flat_size < 50;

  if (manyAnimals && smallFlat) {
    return "Cannot have more animals"
  } else {
    return "Can have more animals"
  }
}

残念ながら、読みやすさのためのローカル変数は暗黙の戻りバージョンでは起こりません.

Note Expression based languages like Elm, Haskell have special expression for having local constants. In that way we can use expression and still make code more readable. Below example from Elm:

-- ELM LANGUAGE --
let
    manyAnimals = 
      user.dogs + user.cats > 5
    smallFlat =
      user.flat_size < 50
in
  if manyAnimals && smallFlat then 
    "Cannot have more animals"
  else
    "Can have more animals"

そして、式であり、上に見えるif式もあります.ステートメントはコードとほとんど同じです.また、明示的なリターンはありませんが、これはJSではありません.

あなたはジレンマを返すかどうか
二つの機能

let bomb = (bomb) => {
  api.post.sendBomb(bomb); // doesn't return
}

let secondBomb = (bomb) => (
  api.post.sendBomb(bomb); // does return
)

違いがないようですが、異なるブラケットのために、私たちは異なるリターンを持っていますsendBomb 戻ります.全く暗黙の違いはあなたを考えません?復帰があるかどうか理解するためにブラケットを見る必要があります.

オブジェクトリターン
それは伝説的な例だと思います.私の最初の印象は何年も前のことでした.どのように、我々は暗黙のリターンによってオブジェクトを返しますか?

let f = (a) => {a} // this has no return
let f2 = (a) => ({a}) // returns object with key 'a'

それは、常に私を悲しくさせました.構文の混乱が高いので、実行する必要はありません.

let f3 = (a) => { 
  return {a}; 
}

はい、それらのすべての最も長いが、混乱はありません.

私はフックを反応させたい

const Component = ({name}) => (
  <div>
    {name}
  </div>
)

偉大な、今我々はいくつかのフックを使用する必要がある場合?残念ながら、関数を書き直す必要があります.

const Component = ({name}) => {
  const [show, setShow] = useState(true);
  return {show && <div>
    <button onClick={() => setShow(true)} >Hide</button>
    {name}
  </div>}
}

明示的なリターンを避ける方法はありません.コンポーネントの書き直し、括弧の変更、リターンの追加が必要です.多分、それほどでなく、私のために、それは常に重荷です.
でも待ちます.onClick 矢印機能は、それは明示的なリターンを持って、そこに行く、あなたはそれを使用している-緩い.Yep私はそれが最良のフィットとしてそれを表示するときに矢印関数の暗黙のリターンを使用している、多くの場合、関数の引数のために我々はすでにすべての必要なデータを閉じている、我々はローカル変数を必要としない、ほとんどの場合、彼らは単純な関数です.したがって、yesは暗黙のリターンを使用する際に問題を全く見ません、しかし、全体の怒号はそれを使用していないが、式ベースの関数のリターンを使用することを禁じます.私はそれを禁止する正当な理由を全く見ません、同じように、私は標準的な機能構文を使用しない理由を見ません.
プロジェクトで矢印本体スタイルの規則を持っている場合は、それをオフにします.必要なコードの制限を作成しないでください.

Note that the whole article is about JS only. If language does not have explicit return - good, there is no problem and no decision making.