if文の条件に一致しなかった場合の処理

[koniooo]

if (条件式) {
  return foo;
} else {
  return bar;
}

上のコードのようにif文の条件を満たさなかった場合の処理はelse文に書くのが正しいと思っていたのですが、下のコードのように単にif文のブロックの外に書いているコードもよく見かけます。

if (条件式) {
  return foo;
}
return bar;

たしかにどちらも同じ結果になるとは思うのですが、パフォーマンスや使い分けの慣習など何か違いがあるのでしょうか？
書籍と直接関係ない、またとても初歩的な質問で申し訳ありません。

[azu]

結論的には好みの問題になりますが、コードを読みやすくするための工夫だと思います。

ネストが深いとコードが読みにくく感じるというのは、大体の人が共通している感覚だと思います。
https://jsprimer.net/basic/condition/#nested-if-statement

if (条件式) {
  return foo;
} else {
  return bar;
}

もelse部分で不要なブロック({ ... })があって、これが読みにくいと感じる人もいるのだと思います。

else { // これで不要なネストに見える)
  return bar;
}

そのため、elseじゃなくて、単純に return を外側に書く人たちもいるという感覚です。

if (条件式) {
  return foo;
}
return bar;

これを扱うESLintのルールとしてno-else-returnというものがあります。
ただ、このルールもrecommenedではないので、そういうのを好む人が一定数いるという程度だと思います。

• no-else-return - Rules - ESLint - Pluggable JavaScript linter

微妙に関連しそうな話としては、Early Return(早期リターン)というテクニックが関係していそうです。

例えば、次のような複雑な条件式を通り抜けたときのみ処理するような場合に、
ifのネストで書くとどこが重要な処理なのかが少しわかりにく感じになります。

// aが条件を全てパスときのみ、実際に処理する
const process(a){ 
  if (条件式) {    
    if (条件式) {
      if (条件式) {
         // 実際に処理する
      } 
    } 
  } 
}

これは言い換えればどれかの条件を満たさなかったとき(条件式がfalse)は処理する必要がないということなります。
そこで条件を満たさなかったらすぐにreturnしてしまうことをEarly Returnと言ったりします。
(通常は条件式が複雑なほどコードが複雑になりますが、Early Returnなどのテクニックは条件式が複雑になっても、コードの複雑性は一定に保つ意図があります)

上のコードは、次のように条件式のネストをなくしてフラットにかけます。

// aが条件を全てパスときのみ、実際に処理する
const process(a){ 
  if (!条件式) {
    return;
  } 
  if (!条件式) {
    return;
  } 
  if (!条件式) {
    return;
  } 
  // 実際に処理する
}

これもif elseのelseを書かないのと同じようにネストを少し無くそうという書き方として似ているものだと思います。
この話は、JavaScriptに限らず、ifとelseがある大体の言語で同じようなパターンがあるきはします。

そのため、コードをスッキリ見せたいから、余計なブロック({})を減らして書くためにelseを使っていないという感じだと思います。

次の書籍などで、同じようにネストを減らすテーマがあった気がします。

• O'Reilly Japan - リーダブルコード
• リファクタリング 既存のコードを安全に改善する（第2版） | Ohmsha

[koniooo]

非常に丁寧でわかりやすい解説ありがとうございます。
ESLintのルールの一つにもなっていたのですね。
リーダブルコード読んでみます。