今回は「配列内のオブジェクトの複数プロパティを同時に条件分岐で更新する」ケースのステップ実行を紹介します。
変数・オブジェクトの状態を逐次追跡し、条件がどのように評価され、どのプロパティが変更されたかを明確にします。
練習問題：配列内オブジェクトの複数プロパティ更新
let products = [
{ name: "Laptop", price: 1200, stock: 5, onSale: false },
{ name: "Mouse", price: 25, stock: 50, onSale: false },
{ name: "Keyboard", price: 75, stock: 0, onSale: false }
];
// 条件に応じて price と onSale を更新
for (let i = 0; i < products.length; i++) {
if (products[i].stock > 0 && products[i].price > 100) {
products[i].price *= 0.9; // 10%割引
products[i].onSale = true;
} else if (products[i].stock === 0) {
products[i].onSale = false; // 在庫なしはセール対象外
}
}
console.log(products);
JavaScript
出力
[
{ name: "Laptop", price: 1080, stock: 5, onSale: true },
{ name: "Mouse", price: 25, stock: 50, onSale: false },
{ name: "Keyboard", price: 75, stock: 0, onSale: false }
]
JavaScript
ステップ実行（逐次追跡）
| i | 商品名 | price | stock | onSale | 条件評価 | 更新内容 |
|---|
| 0 | Laptop | 1200 | 5 | false | stock>0 && price>100 → true | price=1200×0.9=1080, onSale=true |
| 1 | Mouse | 25 | 50 | false | stock>0 && price>100 → false | 次の else if 条件 stock===0 → false → 変更なし |
| 2 | Keyboard | 75 | 0 | false | stock>0 && price>100 → false | else if stock===0 → true → onSale=false（元からfalseなので変化なし） |
解説ポイント
- 複数プロパティの同時更新
price と onSale を一緒に更新- 条件にマッチした場合のみまとめて代入できる
- 条件分岐で対象を絞る
- 高価格かつ在庫ありの商品だけ割引
- 在庫なしはセール対象外
- 参照型オブジェクト
- 配列の各要素はオブジェクト参照なので、更新は元配列に反映される
- 逐次追跡表の利点
- どの条件が true/false になったか
- どのプロパティが更新されたか
- どの商品は変更なしか
→ 一目で理解可能
応用：複雑条件で複数プロパティを更新
let products = [
{ name: "Laptop", price: 1200, stock: 5, onSale: false, featured: false },
{ name: "Mouse", price: 25, stock: 50, onSale: false, featured: false },
{ name: "Keyboard", price: 75, stock: 0, onSale: false, featured: false }
];
for (let i = 0; i < products.length; i++) {
let p = products[i];
if (p.stock > 0 && p.price > 100) {
p.price *= 0.9; // 10%割引
p.onSale = true;
p.featured = true; // 特集商品にする
} else if (p.stock === 0) {
p.onSale = false;
p.featured = false;
}
}
console.log(products);
JavaScript
ステップ実行（抜粋）
| i | 商品名 | price | stock | onSale | featured | 条件評価 | 更新内容 |
|---|
| 0 | Laptop | 1200 | 5 | false | false | stock>0 && price>100 → true | price=1080, onSale=true, featured=true |
| 1 | Mouse | 25 | 50 | false | false | stock>0 && price>100 → false | 条件に合わず変更なし |
| 2 | Keyboard | 75 | 0 | false | false | stock>0 && price>100 → false, else if stock===0 → true | onSale=false, featured=false（元からfalse） |
ポイントまとめ
- 配列内のオブジェクトに対して条件分岐で複数プロパティを同時に更新するパターンは、在庫管理・セール処理・ユーザー状態更新などでよく使われる
- 参照型であるため、
p などの一時変数を使うとコードが読みやすい
- 逐次表を使って「条件評価→更新内容」を追うと、バグ防止に役立つ
