【JavaScript】条件分岐

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• 条件分岐とは
• if文、switch文による条件分岐の方法

if文

• 条件式の結果によって、「もし変数strがAであれば〇〇をする」のような条件によって処理を切り替え、分岐できる。
• 条件式として、比較演算子などを用いた結果(真偽値:true、false)によって処理を分岐させることもできる。
• また、真偽値以外も指定できるが暗黙的型変換が行われ、その結果によって処理を分岐する。
  (参考:falsyな値はfalse、それ以外はtrueとなり条件分岐を行う)

// ブロック{}と組み合わせることが多い(組み合わせることでyif文内に複数の処理が書ける)
if (条件式) {
  // 条件式がtrueの場合に行われる処理
}

// ..後続の処理

// 条件式に比較演算子を使用
const num = 5;
if (num > 0) {
  console.log("変数numが0より大きい場合に実行される");
}
// => 変数numが0より大きい場合に実行される

// falsyな値で試す
const str1 = "not falsy";
if (str1) {
  console.log("str1の値がfalsyではない場合、すなわちtrueの場合に処理される");
}
// => str1の値がfalsyではない場合、すなわちtrueの場合に処理される と出力される

const str2 = ""; // 空文字はfalsyな値に含まれる
if (str2) {
  console.log("str2の値がfalsyではない場合、すなわちtrueの場合に処理される");
}
// str2はfalsyな値(false)なので何も出力されない

else if文

• 複数の条件分岐を書くことができる。
• 「もし変数strがAであれば〇〇、変数strがBであれば△△」のように条件分岐ができる。

const str = "B";

if (str === "A") {
  console.log("strはAでした");
} else if (str === "B") {
  console.log("strはAではなく、Bでした");
}
// => strはAではなく、Bでした

else文

• if文、else if文の条件のどれにも一致しなかった場合の処理を書くことができる。
• 「もし変数strがAであれば〇〇、変数strがBであれば△△、それ以外は××」のような条件分岐ができる。

const str = "C";

if (str === "A") {
  console.log("strはAでした");
} else if (str === "B") {
  console.log("strはAではなく、Bでした");
} else {
  console.log("どの条件にも当てはまりませんでした");
}
// => どの条件にも当てはまりませんでした

switch文

• 式の評価結果がcaseに指定した値と一致した場合に処理を分岐できる。
• break文と組み合わせ、各case内の処理を終えた後にswitch文を抜けることができる。
  ※break文が無いと、後続のcase内の処理が条件関係なく実行される
• caseのどれにも当てはまらなかった場合、もしくは式がfalseの場合
  • default内に記載した処理を行う。

switch (式) {
    case 指定値1:
        // `式`の評価結果が`指定値1`と一致する場合に実行する文
        break;
    case 指定値2:
        // `式`の評価結果が`指定値2`と一致する場合に実行する文
        break;
    default:
        // どのcaseにも該当しない、もしくは式がfalseの場合の処理
        break;
}

// ..break後の後続処理

const name = "TARO";
switch (name) {
    case "TARO":
        console.log("TAROさんお待ちしておりました");
        break;
    case "MAI":
        console.log("MAIさんお待ちしておりました");
        break;
    case "HANAKO":
        console.log("HANAKOさんお待ちしておりました");
        break;
    default:
        console.log("初めてお会いする方ですね");
        break;
}

console.log("お席へご案内します");

// => TAROさんお待ちしておりました
// => お席へご案内します