liveBook · Manning

Shorthand property name

As explained in Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond

An object-literal form in which a property can be written using a single identifier when the property name and value binding share the same name.

When an object property and its value come from a variable with the same name, you can write that name once: `{ count }` is equivalent to `{ count: count }`. This shorthand works alongside ordinary properties and methods in an object literal. section 12.1

Updating an object

Destructure `count` from the current state, change it, then pass it back as `{ count }`. The same shorthand works for nested properties such as `{ lat, lng }`. section 12.1 section 12.1

Listing 12.1. Mixing shorthand and longhand object literals
const lat = 33.762909; const lng = -84.422675; const accuracy = 1200.4; const shorthand = { name: 'Atlanta', accuracy, location: { lat, lng } }; const longhand = { name: 'Atlanta', accuracy: accuracy, location: { lat: lat, lng: lng } }

Compare equivalent object literals: the shorthand form uses `accuracy`, `lat`, and `lng` without repeating them after colons. section 12.1

How Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond covers it

How deep it goes
Defines the matching-name rule, shows equivalent syntax, and demonstrates mixing shorthand with longhand properties.
Examples
Uses message objects, a state update, and nested latitude and longitude properties.
What you can do after
Apply shorthand syntax to object literals when a property name matches its value binding.
How it connects
Connects object literals with destructuring and state updates.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond. The section links point to the parts of the book it draws on.