Object Shorthand & Computed Keys

Write objects with less repetition using property shorthand, and build objects with dynamic keys using computed property names — both everywhere in React.

Step 1 of 3

Property shorthand: stop repeating yourself

It's incredibly common to build an object from variables that already have the right names:

const oldUser = { name: name, role: role };   // repetitive

When the property name matches the variable name, modern JavaScript lets you write it once. This is property shorthand:

const user = { name, role };   // same thing, no repetition

You'll see this everywhere: returning data from functions, building props to pass to React components, assembling state. Less typing, less to read, fewer chances to mistype.

Think of it this way: It's like a name tag that just says your name once. The old way wrote "Name: Name" on every tag; shorthand trusts that "name" already tells you everything.

Web Standard

Shorthand only applies when the key and the variable share a name. { name } is exactly { name: name }. If they differ, write it in full: { fullName: name }.

Learn more on MDN

MDN — Object initializer (shorthand)

JAVASCRIPTREAD ONLY

CONSOLE

Click "Run" to execute your code...