Closure CavesISSUE #16 of 61

computed property names

LambdaVSThe Mutator

Lambda saysComputed property names let you use a variable or expression as an object key.

Wrap a key in brackets to compute it: { [keyVar]: value } or { ['user_' + id]: data }. This builds objects with dynamic keys in one literal instead of creating the object then assigning. Common for keying by id, building lookup maps, and reducers.

Power-ups you unlock

{ [expr]: value } computes the key
Dynamic keys inside the literal
Useful for lookups keyed by id/variable
Combine with shorthand and spread

The Mutator attacks — common mistakes

Forgetting the brackets (key becomes literal text)
Duplicate computed keys silently overwriting
Overcomplicating where a Map fits better

Boss battleBuild an object whose key comes from a variable using computed property syntax.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>const field='email'; const rec={ [field]:'a@b.com', ['id_'+7]:7 };
document.getElementById('o').textContent=JSON.stringify(rec);</script></body></html>

▶ Open the interactive comic issue

‹ Spread On Objects · Merging Getters · Setters · Accessors ›