JavaScriptでオブジェクトのプロパティを条件付きで変更する方法

JavaScriptでオブジェクトのプロパティを条件に応じて変更したい場合は、論理AND演算子（&&）を活用するのが効果的です。

論理AND演算子は、両方のオペランドが真（truthy）である場合にのみ条件がtrueと評価されるため、スプレッド構文（...）と組み合わせることで、条件が満たされたときだけプロパティを上書きできます。

基本的な考え方

以下のように、オブジェクトのスプレッド構文と論理AND演算子を組み合わせます。

• 条件がfalseの場合：isBacklog === true && { Mark1: 93 } は false を返すため、元のプロパティはそのまま維持されます。
• 条件がtrueの場合：新しいオブジェクトが展開され、既存のプロパティが上書きされます。

サンプルコード

let marksDetails = { Mark1: 33, Mark2: 89 },
    isBacklog = false;

console.log("追試（バックログ）フラグがfalseの場合の結果===");
console.log({ ...marksDetails, ...isBacklog === true && { Mark1: 33 }});

isBacklog = true;

console.log("追試（バックログ）フラグがtrueの場合の結果===");
console.log({ ...marksDetails, ...isBacklog === true && { Mark1: 93 }});

実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node ファイル名.js

ここでは、ファイル名を demo77.js として保存しています。

実行結果

このプログラムを実行すると、以下の出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo77.js
追試（バックログ）フラグがfalseの場合の結果===
{ Mark1: 33, Mark2: 89 }
追試（バックログ）フラグがtrueの場合の結果===
{ Mark1: 93, Mark2: 89 }

解説

このテクニックのポイントは、...（スプレッド構文）によるオブジェクト展開の挙動です。false や null などの値はオブジェクトとして展開されないため、条件式がfalseを返してもエラーにならず、元のオブジェクトがそのまま出力されます。

一方、条件がtrueの場合は、右辺のオブジェクトリテラル（例：{ Mark1: 93 }）が展開され、同じキーを持つプロパティが後から上書きされます。その結果、Mark1 の値だけが33から93に変更され、他のプロパティ（Mark2）は影響を受けません。

この手法を使えば、if文や三項演算子を使わずに、簡潔で宣言的なコードでオブジェクトのプロパティを条件付きに変更できます。