今回は「オブジェクトの中にネストされたオブジェクトや配列」があり、条件分岐で状態を更新するケースのステップ実行解説を紹介します。
初心者でもどの条件が評価され、どのプロパティが変化したかを追いやすいように丁寧に表で示します。
練習問題：ネストオブジェクト＆配列＋条件分岐
let classroom = {
teacher: { name: "Ms. Smith", active: true },
students: [
{ name: "Alice", score: 95, passed: false },
{ name: "Bob", score: 62, passed: false },
{ name: "Charlie", score: 78, passed: false }
]
};
// 条件分岐で students の合格判定を行う
for (let i = 0; i < classroom.students.length; i++) {
if (classroom.students[i].score >= 70) {
classroom.students[i].passed = true;
}
}
console.log(classroom.students);
出力
[
{ name: "Alice", score: 95, passed: true },
{ name: "Bob", score: 62, passed: false },
{ name: "Charlie", score: 78, passed: true }
]
ステップ実行（逐次追跡）
| ステップ | i | 学生 | score | passed | 条件評価 | 実行ブロック |
|---|---|---|---|---|---|---|
| ① | 0 | Alice | 95 | false | 95 >= 70 → true | passed = true |
| ② | 1 | Bob | 62 | false | 62 >= 70 → false | 条件スキップ、passedはfalse |
| ③ | 2 | Charlie | 78 | false | 78 >= 70 → true | passed = true |
最終状態（console.log）
[
{ name: "Alice", score: 95, passed: true },
{ name: "Bob", score: 62, passed: false },
{ name: "Charlie", score: 78, passed: true }
]
解説ポイント
classroom.studentsは 配列、要素は オブジェクトforループで各要素にアクセスし、条件分岐でプロパティを更新- 参照型なので
classroom.students[i].passedを変更すると元の配列に反映される - 条件分岐で false の場合は何も変更されない
応用例：ネストされたオブジェクトの複合条件
let classroom = {
teacher: { name: "Ms. Smith", active: true },
students: [
{ name: "Alice", score: 95, passed: false, extraCredit: 5 },
{ name: "Bob", score: 62, passed: false, extraCredit: 15 },
{ name: "Charlie", score: 78, passed: false, extraCredit: 0 }
]
};
// 合計点で合格判定
for (let i = 0; i < classroom.students.length; i++) {
let total = classroom.students[i].score + classroom.students[i].extraCredit;
if (total >= 70) {
classroom.students[i].passed = true;
}
}
console.log(classroom.students);
出力
[
{ name: "Alice", score: 95, passed: true, extraCredit: 5 },
{ name: "Bob", score: 62, passed: true, extraCredit: 15 },
{ name: "Charlie", score: 78, passed: true, extraCredit: 0 }
]
ステップ実行
| ステップ | i | 学生 | score | extraCredit | total | 条件評価 | passed | 実行ブロック |
|---|---|---|---|---|---|---|---|---|
| ① | 0 | Alice | 95 | 5 | 100 | 100 >= 70 → true | false → true | passed = true |
| ② | 1 | Bob | 62 | 15 | 77 | 77 >= 70 → true | false → true | passed = true |
| ③ | 2 | Charlie | 78 | 0 | 78 | 78 >= 70 → true | false → true | passed = true |
ポイントまとめ
- ネストされたオブジェクトや配列は、ドット記法でアクセスできる
- 条件分岐＋ループで各要素を更新するときは逐次追跡すると理解しやすい
- 合格判定やスコア計算など、実務の「複数データの処理」に非常に応用可能
- 表形式で「変数」「条件」「実行ブロック」を追うと、初心者でもバグの発生箇所がすぐ分かる
