Computed Properties & Shorthand

Object literals in modern JavaScript are far more expressive than the rigid { key: value } pairs of the past. ES2015 introduced computed property names, which let you build keys from any expression at runtime, alongside property and method shorthand that cut boilerplate. Together these features make object literals a compact, declarative tool for assembling data on the fly — no temporary variables or post-construction assignment required.

Property and method shorthand

When a property value comes from a variable of the same name, you can omit the colon and the duplicated identifier. This shorthand keeps object construction readable, especially when packaging up local variables to return from a function.

const name = "Ada";
const role = "engineer";

// Verbose
const user1 = { name: name, role: role };

// Shorthand — identical result
const user2 = { name, role };

console.log(user2);

Output:

{ name: 'Ada', role: 'engineer' }

Methods get their own shorthand too. Instead of assigning a function expression to a key, you write the name directly followed by the parameter list. This is purely syntactic sugar for a normal function-valued property — the method still has the correct this binding when called on the object.

const calculator = {
  value: 0,
  add(n) {
    this.value += n;
    return this;
  },
  reset() {
    this.value = 0;
    return this;
  },
};

console.log(calculator.add(5).add(3).value);

Output:

Method shorthand creates a non-arrow function, so this refers to the object. Never use an arrow function for a method that needs this — arrows capture the surrounding scope’s this, not the object’s.

Computed property names

A computed property name lets you use any expression as a key by wrapping it in square brackets inside the object literal. The expression is evaluated and coerced to a string (or a Symbol) at the moment the object is created. This is invaluable when the key isn’t known until runtime.

const field = "email";
const prefix = "user";

const record = {
  [field]: "[email protected]",
  [`${prefix}_id`]: 42,
  [1 + 1]: "two",
};

console.log(record);

Output:

{ '2': 'two', email: '[email protected]', user_id: 42 }

Notice that the numeric key 2 is coerced to a string and, because integer-like keys are ordered first, appears before the string keys. Computed names also accept Symbol keys, which is the canonical way to define well-known symbols like Symbol.iterator directly in a literal.

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    return {
      next: () => ({ value: current, done: current++ > last }),
    };
  },
};

console.log([...range]);

Output:

[ 1, 2, 3 ]

Building objects dynamically

Computed keys shine when transforming data — for example, indexing an array into a lookup map keyed by an id. Combined with Object.fromEntries, you can convert key/value pairs into an object in a single expression.

const people = [
  { id: "a1", name: "Ada" },
  { id: "b2", name: "Babbage" },
];

// Index by id using a computed key inside reduce
const byId = people.reduce((acc, p) => ({ ...acc, [p.id]: p }), {});
console.log(byId.b2.name);

// Same result via Object.fromEntries
const byId2 = Object.fromEntries(people.map((p) => [p.id, p]));
console.log(byId2.a1.name);

Output:

Babbage
Ada

Computed keys are also handy for conditional or namespaced properties when merging configuration:

function makeConfig(env, port) {
  return {
    [`${env}Port`]: port,
    [env === "prod" ? "secure" : "debug"]: true,
  };
}

console.log(makeConfig("prod", 443));
console.log(makeConfig("dev", 3000));

Output:

{ prodPort: 443, secure: true }
{ devPort: 3000, debug: true }

Syntax reference

Feature	Syntax	Equivalent to
Property shorthand	`{ x }`	`{ x: x }`
Method shorthand	`{ go() {} }`	`{ go: function () {} }`
Computed string key	`{ [expr]: v }`	key is `String(expr)`
Computed symbol key	`{ [sym]: v }`	key is the `Symbol`

Best Practices

Reach for property shorthand whenever the variable name matches the intended key — it removes noise and lowers the chance of typos.
Use method shorthand for object methods, but keep them as regular (non-arrow) functions so this resolves to the object.
Prefer computed property names over creating an empty object and assigning obj[key] = value afterward; the literal form is clearer and atomic.
Remember that all computed keys except symbols are coerced to strings, so [true] becomes the key "true".
Use Object.fromEntries with Array.prototype.map for clean array-to-object transformations instead of mutating an accumulator.
Define Symbol-based keys (like Symbol.iterator) with computed names directly in the literal to keep related behavior co-located.

Computed Properties & Shorthand

Property and method shorthand

Computed property names

Building objects dynamically

Syntax reference

Best Practices

Related Topics