Property shorthand

JavaScriptJunior~2 min read

The property shorthand is JavaScript syntactic sugar that lets you build an object more concisely when the property name matches the variable name. It arrived in ES6 and is now the standard way of assembling objects out of variables.

Theory

TL;DR

{ x, y } is fully equivalent to { x: x, y: y }, it is only a shorter spelling.
It works only when the key and the variable share a name; otherwise you need the regular key: value form.
Shorthand and regular properties can be mixed inside one literal.
It is especially handy in factories and in functions that return an object built from their own parameters.
It combines with computed keys such as [key]: value and with the shorthand method syntax method() {}.

Quick example

javascript

const x = 10;
const y = 20;

const point = { x, y };

console.log(point); // { x: 10, y: 20 }

The long form and the shorthand

Before ES6 (or without the shorthand) you would write the same thing like this:

javascript

const x = 10;
const y = 20;

const point = {
  x: x,
  y: y
};

console.log(point); // { x: 10, y: 20 }

The keys and the variables have identical names here, which makes the code look redundant. With the shorthand you just write the name and JavaScript creates the key: value pair for you:

javascript

const point = { x, y };

Under the hood it is the same thing:

javascript

{ x, y }
// is equivalent to
{ x: x, y: y }

The property name is taken literally from the variable name, so renaming the variable also renames the object key.

Mixing regular and shorthand properties

Both styles combine freely inside a single literal:

javascript

const name = 'Maria';
const age = 25;

const user = {
  name,
  age,
  country: 'Ukraine'
};

console.log(user);
// { name: 'Maria', age: 25, country: 'Ukraine' }

The shorthand applies to the properties that have a variable of the same name, and everything else is written the regular way.

Shorthand in functions

javascript

function createUser(name, age) {
  return { name, age };
}

console.log(createUser('Oleh', 30));
// { name: 'Oleh', age: 30 }

This noticeably simplifies factories and constructors whose keys match the function parameters. The same trick pairs well with destructuring, where you pull an object apart into variables and then assemble a new one:

javascript

const { id, email } = response;
const payload = { id, email };

Combining with computed properties and methods

javascript

const key = 'city';
const value = 'Kyiv';

const obj = { [key]: value, country: 'Ukraine' };
console.log(obj); // { city: 'Kyiv', country: 'Ukraine' }

The shorthand works alongside the other object-literal features. ES6 also has a shorthand for methods, where instead of greet: function () {} you simply write greet() {}:

javascript

const name = 'Maria';

const user = {
  name,
  greet() {
    return `Hello, ${this.name}`;
  }
};

console.log(user.greet()); // Hello, Maria

Summary table

Syntax	Equivalent	What it does
`{ x, y }`	`{ x: x, y: y }`	creates properties named after the variables
`{ name, age, country: 'Ukraine' }`	`{ name: name, age: age, country: 'Ukraine' }`	lets you mix both styles
`{ [key]: value }`	a computed key	the property name comes from the variable's value
`{ greet() {} }`	`{ greet: function () {} }`	shorthand method syntax

Common mistakes

Expecting the shorthand to work when the names differ. { userName } produces the key userName, not name. If the key must be named differently, write { name: userName }.
Confusing the shorthand with a computed key. { key } gives the key "key", while { [key]: value } takes the key name from the value of the variable key.
Forgetting that a later property shadows an earlier one. In { x, x: 5 } the last occurrence wins, so the result is { x: 5 }.
Thinking it changes something about the object. The shorthand affects only the source text; the properties created are ordinary ones with the standard descriptors.
Using it in an old environment without transpilation. This is ES6 syntax, so very old engines without Babel will not parse it.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.