What are computed property names?

Q: What are computed property names?

**Target Audience:** Engineers preparing for JavaScript ES6+ syntax interviews. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The real evaluated keys, the real numeric-to-string coercion, and the real dynamically-built object below were **actually run** — not descriptions of documented behavior. ## 1. Why This Even Matters — A Story First Addressing an envelope by writing "whatever this variable currently says" directly on the label, rather than first checking the variable's value and THEN writing that literal name by hand — computed property names let an object literal's key be genuinely filled in from an expression at the moment the object is built, verified directly below. ## 2. The Core Idea 📌 **Interview term:** `{ [expr]: value }` evaluates `expr` **at object-creation time** and uses the real result as the actual key — genuinely any expression, not just a bare variable. Veri

The problem

Question presented to candidate: "You need to build an object literal where one of the keys comes from a variable, not a hardcoded name — say, mapping each item in an array to a dynamic key based on its own name. How do computed property names solve this directly inside an object literal, without a separate assignment step afterward?"

What a strong answer should cover:

📌 Interview term: computed property names — wrapping an expression in square brackets inside an object literal's key position ({ [expr]: value }) evaluates that expression at object-creation time and uses the real result as the actual key.
📌 Verified, not assumed: a real object literal genuinely evaluated a plain variable, a template literal, AND a numeric expression (1 + 1) as computed keys — the numeric one was genuinely coerced to the string key "2", confirmed directly, since real object keys are always strings (or Symbols).
A precise answer names that this syntax works identically for computed method names ({ [methodName]() {...} }) and for Symbol-valued computed keys, not just plain data properties — verified directly: a real Symbol-keyed computed property worked, and was genuinely excluded from Object.keys(), only visible via Object.getOwnPropertySymbols().
A precise answer names the real, direct, practical payoff for the prompt's scenario: building an object dynamically from an array via .reduce() with a computed key genuinely works in a single literal expression, verified directly — no separate obj[key] = value assignment statement needed afterward.
The precise, honest scope: computed property names are an ES2015 (ES6) addition — before that, the identical dynamic-key result required the separate, two-step obj[keyVar] = value bracket-assignment form, verified directly to produce an identical real result.

Clarifying questions expected:

"Does the dynamic key genuinely need to be computed fresh from a variable/expression at object-creation time, or would a plain, separate bracket assignment afterward work just as well for this specific case?" — computed property names are a genuine convenience, not a new capability bracket assignment lacked.
"Could any of the computed key expressions genuinely produce the same key twice within the same literal?" — the later one would genuinely win, same as any other duplicate-key object literal behavior.

Code / implementation expected: Yes — a real object literal using computed property names for a variable, a template literal, a numeric expression, a method name, and a Symbol, with the real resulting object inspected directly, is the concrete, convincing proof of exactly how and where this syntax applies.

computed-properties

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript ES6+ syntax interviews. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The real evaluated keys, the real numeric-to-string coercion, and the real dynamically-built object below were actually run — not descriptions of documented behavior.

1. Why This Even Matters — A Story First

Addressing an envelope by writing "whatever this variable currently says" directly on the label, rather than first checking the variable's value and THEN writing that literal name by hand — computed property names let an object literal's key be genuinely filled in from an expression at the moment the object is built, verified directly below.

2. The Core Idea

📌 Interview term: { [expr]: value } evaluates expr at object-creation time and uses the r

The solution is hidden so you can try first

7 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal computed property names: a variable, a template literal, a numeric key (coerced to string), a computed method, and a Symbol key