JavaScript | レベル別練習問題:条件分岐(if / else / switch)

JavaScript
スポンサーリンク

では「ネストされた条件分岐(ifの中にif)」のステップ実行を丁寧に作ります。
初心者が「どの条件が評価されているか」「変数の状態がどう変化するか」を逐次追えるように解説します。


練習問題:ネストされた if

次のコードを読んで、出力がどうなるか考えてみましょう。

let age = 20;
let hasLicense = true;
let canDrive = "";

if (age >= 18) {
    if (hasLicense) {
        canDrive = "運転できます";
    } else {
        canDrive = "免許が必要です";
    }
} else {
    canDrive = "年齢制限で運転できません";
}

console.log(canDrive);
JavaScript

出力

運転できます

ステップ実行(変数状態を逐次追跡)

ステップ処理agehasLicensecanDrive条件の評価実行ブロック
let age = 20;20true“”
let hasLicense = true;20true“”
let canDrive = "";20true“”
if (age >= 18) を評価20true“”true内部の if に進む
内部 if (hasLicense) を評価20true“”truecanDrive = “運転できます”
else はスキップ20true“運転できます”false
外側 else はスキップ20true“運転できます”false
console.log(canDrive) 実行20true“運転できます”出力: “運転できます”

解説ポイント

  1. 外側の if がまず評価される
    • age >= 18 が true → 内側の if が実行される
  2. 内側の if が評価される
    • hasLicense が true → "運転できます" が代入される
    • false の場合は else が実行され "免許が必要です" になる
  3. 外側の else は無視される
    • 外側条件が false なら、内側の if は評価されない
  4. ネストは深くなると追跡が難しくなる
    • 逐次変数の状態をテーブルに書くと理解しやすい

応用例:三段階の条件

let age = 16;
let hasParentalPermission = true;
let hasLicense = false;
let canDrive = "";

if (age >= 18) {
    if (hasLicense) {
        canDrive = "運転できます";
    } else {
        canDrive = "免許が必要です";
    }
} else {
    if (hasParentalPermission) {
        canDrive = "保護者同意で運転できます";
    } else {
        canDrive = "年齢制限で運転できません";
    }
}

console.log(canDrive);
JavaScript

出力

保護者同意で運転できます

ステップ実行

ステップ処理agehasParentalPermissionhasLicensecanDrive条件評価実行ブロック
age=16, hasParentalPermission=true, hasLicense=false16truefalse“”
外側 if (age >= 18) 評価16truefalse“”falseelse に進む
内側 if (hasParentalPermission) 評価16truefalse“”truecanDrive=”保護者同意で運転できます”
else(内側)スキップ16truefalse“保護者同意で運転できます”false
console.log(canDrive)16truefalse“保護者同意で運転できます”出力

ポイントまとめ

  • ネストされた条件分岐では 外側の条件がまず評価される
  • 内側の if は 外側が true の場合にのみ評価される
  • else が複数重なる場合、変数状態を逐次追跡すると理解が早い
  • テーブル形式で「変数」「条件」「実行ブロック」を書き出すと可視化できる
タイトルとURLをコピーしました