Suggest an edit

Improve this article

Refine the answer for “Property shorthand”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts754 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.