JavaScript（ES6〜）条件分岐

if文

条件式が真である場合に特定のコードブロックを実行するために使用される制御構造
falsyな値は必ずfalseになり、コードブロックは実行されないです

• null
• undefined
• false
• NaN
• 0
• 0n
• “” (空文字列)

const age = 18;

// 1行のみの場合は、ブロック省略ができます
if (age >= 18) console.log("成人です。");

if (age >= 18) {
  console.log("成人です。");
}

// 実行されない
if (null) {
  console.log("成人です。");
}

else if文

複数の条件分岐を書く場合に使います

const age = 20;

if (age < 18) {
  console.log("未成年です。");
} else if (age >= 18 && age < 20) {
  console.log("成人ですが、アルコールは制限があります。");
} else {
  console.log("成人です。");
}

else文

if文で条件に一致しなかった場合、使います

ネストしたif文

ネストは深くなってしまうと可読性が低下するので、なるべくしないようにします

// ネストした例
const age = 20;
const hasPermission = true;

if (age >= 18) {
  if (hasPermission) {
    console.log("成人で許可があります。");
  } else {
    console.log("成人ですが、許可がありません。");
  }
} else {
  console.log("未成年です。");
}

// ネストしていない例
const age = 20;
const hasPermission = true;

if (age >= 18 && hasPermission) {
  console.log("成人で許可があります。");
} else if (age >= 18) {
  console.log("成人ですが、許可がありません。");
} else {
  console.log("未成年です。");
}

switch文

変数の値に基づいて複数の条件を評価し、それに対応する処理を実行する制御構造

• 条件に合致するcaseがあれば、その処理が実行されます
• どのcaseにも当てはまらない場合は、defaultの処理が実行されます

switch (式) {
  case 値1:
    // 式が値1と一致した場合の処理
    break;
  case 値2:
    // 式が値2と一致した場合の処理
    break;
  default:
    // どのcaseにも該当しない場合の処理
}

// if文バージョン
if (式 === 値1) {
  // 式が値1と一致した場合の処理
} else if (式 === 値2) {
  // 式が値2と一致した場合の処理
} else {
  // どのcaseにも該当しない場合の処理
}

• case：各条件を定義
• break： それ以上のcaseの実行を防ぐ（省略すると次のcaseの処理も実行される）
• default：どのcaseにも一致しなかった場合に実行される（オプション）

const score = 85;

switch (true) { 
  case score >= 90:
    console.log("Aランク");
    break;
  case score >= 80:
    console.log("Bランク");
    break;
  case score >= 70:
    console.log("Cランク");
    break;
  default:
    console.log("Dランク");
}

break文

switch文のcaseでは、通常break;を使って処理を終了し、次のcaseに処理が流れないようにします
break;を書き忘れると、意図しないcaseの処理まで実行されてしまい、不具合の原因になることがあります

// break;がない場合
const fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("これはりんごです。");
  case "バナナ":
    console.log("これはバナナです。");
  default:
    console.log("不明なフルーツです。");
}

// 出力
// これはりんごです。
// これはバナナです。
// 不明なフルーツです。

// break;がある場合
const fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("これはりんごです。");
    break;
  case "バナナ":
    console.log("これはバナナです。");
    break;
  default:
    console.log("不明なフルーツです。");
}

// 出力
// これはりんごです。

まとめ

if文は条件に応じてコードを実行し、else ifやelseで複数の分岐が可能ですが、ネストは可読性が低下するので極力避けてください。switch文は特定の値に対する処理を簡潔に記述でき、breakを適切に使わないと意図しない処理を実行されることがあります