JS Puzzles · Const

computed property names

Computed property names let object literals derive keys from evaluated expressions. Put the expression in square brackets to create a dynamic property name.

How it works

In an object initializer, place an expression inside square brackets to compute a property key. JavaScript evaluates that expression and uses its result as the key, enabling names derived from variables, concatenation, or other runtime values.

Syntax

{ [expression]: value }

Key points

Object literals support keys whose names are calculated rather than written as fixed identifiers.
Write the key expression between square brackets immediately before the colon or method definition.
The expression’s evaluated result becomes the object property key.
The notation resembles bracket property access because both use square brackets for dynamic names.
The same dynamic-key idea used for property access is available directly while constructing an object.
An expression can be an array or another value-producing expression, not only a simple variable.

Common mistakes

Computed property names belong to JavaScript object initializers, not JSON syntax; JSON does not permit them.

Example: Build object keys from expressions

const field = "size";
const config = {
  [field]: 12,
  [`mobile${field[0].toUpperCase()}${field.slice(1)}`]: 4,
};

console.log(config.size);       // 12
console.log(config.mobileSize); // 4

Expressions in square brackets are evaluated to create the object’s property names.

When to use it

Dynamic configuration keys

A configuration object needs keys based on a variable such as a field name.

Generated naming conventions

An object needs consistently formatted keys assembled from prefixes, capitalization, or suffixes.

Computed method names

An object literal needs a method whose name is calculated from an expression.

Interview questions

QWhat is a computed property name?

A computed property name is an object-literal key written as [expression]. JavaScript evaluates the expression and uses its result as the property name.

Follow-up: How would you create a key named mobileSize from size? Use a template literal such as [mobile${param.charAt(0).toUpperCase()}${param.slice(1)}].

QHow is the expression in a computed object key used?

The expression is placed inside square brackets, for example {[items]: "Hello"}. The resulting value becomes the key, so an array used there is converted to its property-key representation.

Follow-up: What key does {["A", "B"]: 1} create? The array is converted to the string "A,B", so the resulting key is "A,B".

QWhen would you choose a computed property name?

Computed names are useful when an object must derive keys from variables or expressions rather than fixed identifiers. They provide the object-literal equivalent of dynamically selecting a property name.

Follow-up: How can a computed name be used for a method? Write [expression](parameters) {} inside the object initializer.

object initializer
property accessor bracket notation
method definitions
getter
setter

Source: Object initializer - JavaScript | MDN Web Docs. Checked 2026-10-15.