条件分岐

docs.scrimba.com

常に同じことをするプログラムはあまり役に立ちません。ログインしている訪問者には1つのメッセージを、未登録者には別のメッセージを表示するページが欲しい。18歳の年齢は受け入れるがが12歳は受け入れないフォームが欲しい。ゲームで勝ったか負けたかを報告したい。これらはすべて、質問をして答えに基づいて行動する方法が必要です。これが条件分岐の役割です。条件分岐により、何かが真かどうかに基づいて、コードが何を実行するかを選択できます。

既にピースはそろっています。比較演算子と論理演算子は真偽の答えを生成し、この章はそれに基づいて行動することについてです。

条件が真のときだけコードを実行する

**if文**は、条件が真のときだけコードのブロックを実行します。単語if、括弧内の条件、波括弧内のブロックを書きます。条件が真ならブロックが実行されます。そうでなければ、JavaScriptはブロックをスキップして続行します。

const age = 20;

if (age >= 18) {
  console.log("入場できます。"); // 入場できます。
}

条件age >= 18は真または偽です。ここでageは20なので真で、メッセージが表示されます。ageを12に変更すると条件は偽になり、ブロックはスキップされて何も表示されません。

多くの場合、条件が偽のときのフォールバックが必要です。それがelseの役割です。

const age = 12;

if (age >= 18) {
  console.log("入場できます。");
} else {
  console.log("大きくなったらまた来てください。"); // 大きくなったらまた来てください。
}

2つのブロックのうち正確に1つが実行され、両方が実行されることはありません。3つ以上の結果がある場合、else ifで別の条件をチェックできます。

const score = 74;

if (score >= 90) {
  console.log("成績: A");
} else if (score >= 70) {
  console.log("成績: B"); // 成績: B
} else {
  console.log("成績: C");
}

JavaScriptは上から各条件をチェックし、最初に真になったところで停止します。スコア74は>= 90ではありませんが、>= 70なので、成績: Bと表示されて、elseを見ることはありません。

**if文**は条件が真のときブロックを実行し、オプションのelseブロックは真でないときに実行されます。else ifで連鎖させると、複数の条件を順番にチェックできます。

const score = 74;

if (score >= 90) {
  console.log("成績: A");
} else if (score >= 70) {
  console.log("成績: B"); // 成績: B
} else if (score >= 50) {
  console.log("成績: C");
} else {
  console.log("成績: F");
}

順序が重要であり、これはみんなが間違える部分です。JavaScriptは上から各条件をテストし、最初に真のブロックを実行してから残りをスキップします。そのため、ここの範囲は高い順から低い順に行きます。score >= 70に達した時点で、74は一致してチェーンが停止します。score >= 50を最初に書いた場合、74はそれの代わりに一致して、50以上すべてがCを得ることになります。

条件は真または偽の値を生成する任意の式にすることができるため、演算子の論理演算子を使ってチェックを組み合わせることができます。

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("ショーを楽しんでください。"); // ショーを楽しんでください。
} else {
  console.log("入場が拒否されました。");
}

**if文**は条件を評価し、結果が真のときそのブロックを実行します。オプションのelse ifおよびelse分岐が他のケースに対応します。チェーンは順序が決まっています。JavaScriptは上から下へ条件を評価し、条件が真のブロックを実行してから、チェーン全体を終了します。

const score = 74;

if (score >= 90) {
  console.log("成績: A");
} else if (score >= 70) {
  console.log("成績: B"); // 成績: B
} else if (score >= 50) {
  console.log("成績: C");
} else {
  console.log("成績: F");
}

この形の2つの特性は記憶する価値があります。第1に、ブランチは相互に排他的で、正確に1つだけが実行されます。そのため、ここの境界はそれぞれ片側だけが必要です。score >= 70ブランチはscore < 90がそれを守る必要はありません。その行に到達したということは、すでにscore >= 90テストが失敗したことを意味しているからです。冗長な上限を追加することは一般的な本能であり、チェーンを読みやすくするのではなく、読みにくくしてしまいます。

第2に、条件はブール値に強制変換されるため、リテラル比較である必要はありません。すべての式が機能し、JavaScriptはその真偽値ルールを適用して決定します。その柔軟性は有用であり、時には落とし穴になります。これが、この章の上級層が以下で詳しく戻ってくる理由です。

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("ショーを楽しんでください。"); // ショーを楽しんでください。
} else {
  console.log("入場が拒否されました。");
}

Juno条件が真のときだけコードを実行するifは括弧内の条件が真の場合にのみそのブロックを実行し、elseは真でない場合のフォールバックを提供します。結果が3つ以上の場合はelse ifを追加します。JavaScriptは上から順にチェックし、最初にマッチしたところで停止するので、条件を意味のある順序で並べましょう。

Juno条件が真のときだけコードを実行するif / else if / elseチェーンは最初に真となる条件のブロックを実行し、残りをスキップするため、順序は装飾ではなく論理です。そのため、範囲は高い順から低い順に行きます。条件は真または偽に解決される任意の式にすることができるため、複数のチェックが必要な場合は論理演算子で組み合わせます。

Juno条件が真のときだけコードを実行する チェーンは相互に排他的であり、上から下へ評価されるため、各ブランチは上のブランチでまだ除外していない境界のみが必要です。冗長な上限を追加することは注意深さとして見えるかもしれませんが、本当はノイズにすぎません。条件はブール値に強制変換されるため、予期しない値が滑り込む場合は、真偽値ルールに注意してください。

三項演算子で値を選ぶ

時には、if / elseは1つの小さな仕事をします。2つの値の間から選択することです。そのためには、**三項演算子**と呼ばれるより短い形があります。条件を書いて、?、真の場合に使用する値、:、偽の場合に使用する値を書きます。

const age = 20;
const message = age >= 18 ? "ようこそ" : "若すぎます";

console.log(message); // ようこそ

これを質問として読んでください。age >= 18ですか？はい、messageは"ようこそ"になります。いいえ、"若すぎます"になります。これはif / elseがする同じ判断を1行で行います。

三項演算子は、値を格納または印刷しようとするときに最適です。ブランチが複数のことをする必要がある場合、if文の方が明確なので、各側が単一の値である場合にのみ三項演算子を使用してください。

**三項演算子**は条件に基づいて2つの値の間から選択します。condition ? valueIfTrue : valueIfFalse。if文とは異なり、これは式なので、割り当てたり、テンプレートリテラルに直接ドロップしたりできる値を生成します。

const score = 82;
const passed = score >= 60 ? "合格" : "不合格";

console.log(`結果: ${passed}`); // 結果: 合格

ここが三項演算子がその場所を獲得するところです。2つの値の1つを変数に割り当てるのは、三項演算子が1行で行える仕事ですが、ifバージョンは同じロジックを5行に広げ、両方のブランチで割り当てを繰り返します。

// ifバージョンは同じことをより長くやります：
let passed;
if (score >= 60) {
  passed = "合格";
} else {
  passed = "不合格";
}

役に立つことが止まるのは、ブランチが値を生成する以上のことをするときです。いずれかのブランチが複数のステートメントを実行する必要がある場合、または1つの三項演算子を別の中にネストしていることに気づいた場合、獲得した可読性は失われます。その時点でif文の方が明確な選択です。

**三項演算子**はJavaScriptで3つのオペランドを取る唯一の演算子です。condition ? valueIfTrue : valueIfFalse。これを有用にする区別は、ステートメントではなく式であるということです。値に評価されるため、ステートメントが行えない場所に適合します。割り当ての右側、引数、テンプレートリテラル。

const score = 82;
const label = score >= 60 ? "合格" : "不合格";

console.log(`結果: ${label}`); // 結果: 合格

仕事全体が2つの値の間から選択することであるときに使用し、両方のブランチで割り当てを繰り返すのではなく、割り当てを1か所に保つため、ifよりも三項演算子を好みます。値を選択するために三項演算子を使用し、ブランチを実行するのではなく。

失敗モードはネストです。ブランチそのものが三項演算子である三項演算子は技術的には機能しますが、読者が右から左へ解析し、複数の条件を同時に頭に保つことを強制します。

// 読みにくい。ここではifチェーンまたはswitchを使用してください。
const grade = score >= 90 ? "A" : score >= 70 ? "B" : score >= 50 ? "C" : "F";

その行は正しい答えを生成しますが、次の読者に実質的な努力を要求します。決定に2つ以上の結果がある場合、ifチェーンまたはswitchはそれをはるかに明確に示し、これが次のセクションです。

Juno三項演算子で値を選ぶ 三項演算子は2つの値の間から選択するコンパクトな方法です。condition ? valueIfTrue : valueIfFalse。格納または印刷するものを選択しているときに輝きます。ブランチが単一の値の返却以上のことをする必要がある場合は、フルのifを使用してください。より明確に読むでしょう。

Juno三項演算子で値を選ぶ 三項演算子は式なので、割り当てたり、テンプレートリテラルにドロップできる値を返します。これはifステートメントはできません。2つの値の1つを選択するための明確な選択になります。ifバージョンは両方のブランチで割り当てを繰り返すため。ブランチが実際の作業をするか、三項演算子のネストを開始したら、ifに戻ります。

Juno三項演算子で値を選ぶ 三項演算子は式なので、ステートメントが行えない場所に行きます。割り当て、引数、テンプレートリテラル。値を選択するために使用し、ブランチを実行するのではなく、読みやすいままになります。1つを別の中にネストしたら、それはもはや代価を払わず、マルチアウトカム決定はifチェーンまたはswitchに属しています。

switch で1つの値を固定ケースと比較する

1つの値を固定の可能性のリストと照合しているときに、**switch文**は長いif / else ifチェーンよりも整理されていることができます。チェックする値を指定してから、照合するケースをリストアップします。

const day = "Tue";

switch (day) {
  case "Sat":
    console.log("週末");
    break;
  case "Sun":
    console.log("週末");
    break;
  default:
    console.log("平日"); // 平日
}

switchはdayを各caseと順番に比較します。一致を見つけたら、そのケースのコードを実行します。breakはそれを停止するよう指示します。それがなければ、JavaScriptは次のケースに走り続けます。defaultはケースが一致しないときに実行されるフォールバックで、チェーンの最終elseのようなものです。

breakを忘れるのはswitchの古典的な間違いです。それを外すと、コードは一致したケースを実行してから、breakまたは終了に達するまで下のすべてのケースを実行します。ほぼすべての場合、これはあなたの意図ではありません。

**switch文**は1つの値を固定ケースのセットと比較します。すべてのブランチが同じ値の平等性をテストしているときに、長いif / else ifチェーンよりも明確に読めます。

const status = "shipped";

switch (status) {
  case "pending":
    console.log("注文を受け取りました。");
    break;
  case "shipped":
    console.log("配達中です。"); // 配達中です。
    break;
  case "delivered":
    console.log("配達されました。");
    break;
  default:
    console.log("不明なステータス。");
}

ロジックを運ぶ3つのもの。caseはマッチさせる値をマークし、breakは一致したケースを終了し、defaultは一致しないすべてを処理します。マッチは厳密な等価性（===）を使うため、case "1"は数値1にはマッチしません。

落とし穴はフォールスルーです。breakのないcaseは停止しません。breakの終わりか終了に到達するまで、実行が次のケースに進み続けます。通常はバグですが、複数のケースが1つの結果を共有するときに時々有用です。

const day = "Sat";

switch (day) {
  case "Sat":
  case "Sun":
    console.log("週末"); // 週末
    break;
  default:
    console.log("平日");
}

ここで"Sat"が一致し、"Sun"の共有ブロックにフォールスルーするため、両方の週末の日が同じ行を実行します。これは意図的に使用されたフォールスルーであり、空のケースが共有ブロックの直上にスタックされているため、明確に読めます。

**switch文**は単一の値を取り、一連のcaseラベルと比較し、最初に一致するブロックを実行します。比較は厳密な等価性（===）で、これは重要です。case "1"は数値1にはマッチせず、型強制があなたを救いません。

const status = "shipped";

switch (status) {
  case "pending":
    console.log("注文を受け取りました。");
    break;
  case "shipped":
    console.log("配達中です。"); // 配達中です。
    break;
  case "delivered":
    console.log("配達されました。");
    break;
  default:
    console.log("不明なステータス。");
}

人々が過小評価するメカニズムはフォールスルーです。switchは1つのケースを実行して停止するのではなく。一致するラベルにジャンプしてから、breakまたは閉じる波括弧に到達するまでまっすぐ下へ実行し、途中のケース境界を無視します。欠落したbreakは一致の下のすべてのケースを実行します。これはほとんどのswitch バグの原因であり、複数の値が1つのブロックを共有するようにラベルをスタックする1つの意図的な動作の使用でもあります。

const day = "Sat";

switch (day) {
  case "Sat":
  case "Sun":
    console.log("週末"); // 週末
    break;
  default:
    console.log("平日");
}

defaultは最後に来る必要はありませんが、それを最後に配置することは、switch を読みやすく保つ慣例です。また、switchは1つの値に対してのみ等価性をテストするため、前の等級の例のような一連の範囲チェックはswitchにはなりません。その制限は、switchが正しい道具であるときがわかるものであり、これは最後の部分で詳しく述べます。

Junoswitch で1つの値を固定ケースと比較するswitchは1つの値をcaseオプションのリストと照合し、一致したものを実行し、defaultをキャッチオールとします。各ケースを常にbreakで終了します。そうしないと、JavaScriptは下のケースに走り続けます。その欠落したbreakはほぼすべての人が少なくとも1回は犯す間違いです。

Junoswitch で1つの値を固定ケースと比較する すべてのブランチが同じ値の等価性をテストして固定ケースに対してテストしているときにswitchを使用し、===でマッチするので、"1"は1ではないことを覚えておいてください。各ケースにはbreakが必要です。そうしないと、次のケースにフォールスルーします。そのフォールスルーはデフォルトではバグですが、空のケースを共有ブロックの上にスタックするのは、それが必要な1回です。

Junoswitch で1つの値を固定ケースと比較するswitchは厳密な等価性で1つの値をマッチさせてから、breakを無視しながらケース境界を無視して下へ実行するため、欠落したbreakは一致の下のすべてのケースを実行します。一致したケースと他のケースを無視するのはノイズです。ラベルを共有ブロック上にスタックするのは、その意図的な使用です。1つの値に対してのみ等価性をテストするため、一連の範囲チェックはifチェーンのままです。

正しいツールを選ぶ

これで3つの決定方法があり、選択はほぼ適合について です。範囲や組み合わせの条件、特にほとんどの分岐にはif / else if / elseチェーンを使用します。格納または印刷する2つの値の1つを選択するときに三項演算子を使用します。1つの値を固定オプションの一握りと照合しているときにswitchを使用します。

これらのどれもが他より高度ではありません。あなたの決定を最も明確に述べる1つに手を伸ばし、確信がない場合、ifステートメントは常に安全なデフォルトです。

3つの形式は重複するため、有用なスキルはツールを決定の形に一致させることです。ifチェーンは何でも処理でき、条件が範囲（score >= 70）または組み合わせ（age >= 18 && hasTicket）のときの正しい呼び出しです。三項演算子は、1つの式で2つの値の間から選択するためのものです。switchは、ステータスまたは曜日の名前など、単一の値を複数の固定ケースに対して等価性をテストするときに適合します。

1つのルール、多くの絡み合ったコードを防ぎます。最短ではなく、最も明確に読む形に手を伸ばします。ネストされた三項演算子はifチェーンより短くて読みにくいため、長さは目標ではありません。次の人の明確さ、それはしばしば1か月後のあなたです。

3つのツール、そしてそれらの間の境界は決定の形に帰結します。ifチェーンは一般的な形です。範囲、組み合わせ、および条件が表現できるもの何でも処理するため、ブランチがすべて1つの値に対する等価性テストではないときのデフォルトです。三項演算子は単一の仕事に絞られ、式として2つの値の1つを選択し、両方のブランチが単純なままである間だけ支払い相応です。switchは1つの値が固定ケースのセットに対して等価性と比較されるときに適合します。

このスコープ外でも言及する価値のある4番目のオプションがあります。値を結果にマッピングする場合、参照オブジェクトはしばしば3つすべてを打ちます。ケースごとに値のみを割り当てるswitch、またはvalue === "x"テストの長いifチェーンは、インデックスで作成する単純なオブジェクトとしてより明確なことが多いです。オブジェクトが表にある場合は、そのパターンに遭遇します（オブジェクト）。今のところ、switchが実は偽装テーブルであるときに気付いてください。

2つのより高度な習慣がこれを丸めます。最初は真偽値です。条件は比較である必要がないためです。JavaScriptは条件をブール値に強制変換し、偽として出てくる値は固定された短いセットです。false、0、""（空の文字列）、null、undefined、NaN。他はすべて真です。これがif (name)が"nameが空ではない"の一般的な短縮形である理由であり、また驚くかもしれない理由でもあります。値0は実数ですが、偽の条件なので、if (count)はcountが0のときブロックをスキップします。偽のセットを知っていて、これらのチェックは推測をやめます。

2番目は守衛句です。決定が本当に早期に保釈することについての場合、深くネストされたifは終了条件を最初にチェックして停止するより悪く読みます。その"悪い場合をチェック、停止、次に良いパスで続ける"形状は守衛句であり、メインロジックのインデント解除を保ちます。停止部分は通常、関数から戻ることを意味し、次の章は関数なので、完全なパターンがそこに着陸します。今では持つべき考えは、決定をフラット化し、例外的なケースを最初に処理することで、通常のケースを深くネストするのがより明確であるということです。

Juno正しいツールを選ぶ ほとんどの決定にはifチェーン、2つの値のうちの1つを選択しているときに三項演算子、1つの値を固定オプションと照合しているときにswitchを使用します。どれもが他より洗練されていません。あなたの決定を最も明確に述べるものを選び、確実でない場合はifをデフォルトにします。

Juno正しいツールを選ぶ 形にツールを一致させます。範囲と組み合わせにはif、2つの値の選択には三項演算子、等価性を固定ケースに対してテストするにはswitch。最短ではなく、最も明確に読む形に手を伸ばします。ネストされた三項演算子は短くて追い難いため。次の読者はしばしばあなたなので、彼らのために書いてください。

Juno正しいツールを選ぶifチェーンは一般的なツールで、三項演算子は2つの値の選択用、switchは等価性を固定セットに対して比較するためで、オブジェクトができると、値マッピングswitchはしばしば参照オブジェクトに打ちます。偽のセットを頭の中に保ってください（false、0、""、null、undefined、NaN）。かなりif (count)は、カウントが0のときあなたを驚かせません。そして決定が本当に早期に終了することについてのときは、悪いケースを最初に処理して、ネストをフラット化します。完全な守衛句は関数で着陸します。

条件分岐がここからどこへ行くか

条件分岐は、プログラムが固定スクリプトであることから入力に対応し始める方法です。あなたはそれを絶え間なく使用し、周囲のすべてと組み合わせます。真偽の答えは演算子から来て、ここで作成する決定は、ループでデータを繰り返し実行し、関数でパッケージ化できるようになると支払う価値があります。

次の章、ループは、制御フローの他の半分を追加します。コードを実行するか選択するだけではなく、条件がそれを止めるまで何度も何度も実行します。