今日の参考コード https://codesandbox.io/s/jnw5816zr3

さて、みなさんそろそろ関数になれてきたと思います。ただ今までは、受け取った引数にちょっと加工して返すだけで「ほぼ何もしていない」関数しか作ってきませんでした。

今回は少し実践的に if 文 を使った「条件分岐」をさせたいと思います。

引数によって返す内容が変わる関数

次の関数は、if 文 を持っています。その if 文 は、引数として受け取った boolean という値を判断しています。

const isTrue = boolean => {
  if (boolean === true) {
    return "それは true や！";
    // リターンを「実行」したらそこで試合終了
  }

  // if 文で条件に合わなければここまでくる
  return "それは true 以外や！！";
};

引数として受け取った boolean が true であれば、一つ目の return 文を実行します。

もし条件が合わなければ、一つ目の return は実行されずに次に進みます。そして二つ目の return が実行されます。

仕組みはシンプルですね。

else は使わないのか

普通 if 文 は、else とセットで使われると説明されることが多いのではないでしょうか。

しかし、else を使わない方が見やすい場合も多くあります。次のように else を使ったコードとの違いを少し考えてみましょう。

const isTrue2 = boolean => {
  if (boolean === true) {
    return "それは true や！";
    // リターンを「実行」したらそこで試合終了
  } else {
    // if 文で条件に合わなければここまでくる
    return "それは true 以外や！！";
  }
};

const isTrue = boolean => {
  if (boolean === true) {
    return "それは true や！";
    // リターンを「実行」したらそこで試合終了
  }

  // if 文で条件に合わなければここまでくる
  return "それは true 以外や！！";
};

else を使わない方は、一般的に「早期リターン」と呼ばれる手法です。これを使うと、return されるタイミングが分かった瞬間に、それ以降は読まなくてもいいという利点があります。return をしたら、そこで絶対に「試合終了」だからです。

もし「早期リターン」という技を今まで聞いたことがなかった人は、まずは積極的に取り入れてみてください。「お？ここでもう処理は終わっているから、return で返してしまっても OK だな！」という感覚を磨くことができます。

もう一つの例

もう一つ「早期リターン」が役に立つ例を示します。

次のようになっていると、'それ以外' が実行されることもあるのかな、という気がしますが、絶対にありえません。

const isTrue3 = boolean => {
  if (boolean === true) {
    return "それは true や！";
    // リターンを「実行」したらそこで試合終了
  } else {
    // if 文で条件に合わなければここまでくる
    return "それは true 以外や！！";
  }

  return "それ以外";
};

でもこう書かれていたら、見た瞬間にわかりますよね。最後の一行は無駄だって。

const isTrue3 = boolean => {
  if (boolean === true) {
    return "それは true や！";
    // リターンを「実行」したらそこで試合終了
  } 
  
  return "それは true 以外や！！";

  return "それ以外";
};

これについてはまた細かく説明しますね。

宿題

• 関数内で if 文 を使う。
• if 文 の条件判断は true かそれ以外かを判断する。
• if 文 の条件判断がどうなるにせよ、必ず return で何かを返す関数とする。
• else は使わずに「早期リターン」を使うバージョンで書く

今日は以上です！