ES6 object literal shorthand — for properties, methods, and computed keys — is used everywhere in professional codebases. Knowing all its forms makes object-heavy code (like Redux reducers or API payload builders) significantly more concise.
1Enhanced Object Literals | JavaScript Tutorial - In-Depth Guide Part 1
Property shorthand lets you write '{ name }' instead of '{ name: name }' when a variable's name matches the desired key.
const name = 'Ana', age = 28;
const user = { name, age };Property Shorthand
2Enhanced Object Literals | JavaScript Tutorial - In-Depth Guide Part 2
Method shorthand drops the ':' and 'function' keyword entirely when defining a method inside an object literal.
const calculator = {
add(a, b) {
return a + b;
}
};Method Shorthand
3Enhanced Object Literals | JavaScript Tutorial - In-Depth Guide Part 3
Computed property names let you use a dynamic expression, wrapped in [ ], as an object key.
const field = 'email';
const formState = { [field]: 'a@b.com' };Computed Keys
4Enhanced Object Literals | JavaScript Tutorial - In-Depth Guide Part 4
Computed keys can be built from any expression, including template literals and function calls, not just a bare variable.
const field = 'email';
const errors = { [`${field}Error`]: 'Invalid email' };Any Expression as Key
5Enhanced Object Literals | JavaScript Tutorial - In-Depth Guide Part 5
All three shorthand forms combine naturally, which is exactly why Redux-style reducers and API payload builders read so concisely in modern JS.
function reducer(state, { field, value }) {
return { ...state, [field]: value };
}Combined in Practice
6Step-by-Step Breakdown
Property shorthand lets you write '{ name }' instead of '{ name: name }' when a variable's name matches the desired key.
Checkpoint: Does { name } require a variable named name to already exist in scope?
- →Yes, shorthand infers the value from an existing identifier
- →No, it creates a new variable called name
Method shorthand drops the ':' and 'function' keyword entirely when defining a method inside an object literal.
Computed property names let you use a dynamic expression, wrapped in [ ], as an object key.
Computed keys can be built from any expression, including template literals and function calls, not just a bare variable.
Checkpoint: In { [field]: value }, when is the key name actually determined?
- →At object creation time, by evaluating the expression in brackets
- →Later, whenever the property is first accessed
All three shorthand forms combine naturally, which is exactly why Redux-style reducers and API payload builders read so concisely in modern JS.
Next, we'll explore 'Higher Order Functions'.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Computed Keys Simplify Building Dynamic ARIA Attribute Maps
When generating a map of field names to their corresponding error message IDs for aria-describedby wiring, computed property names let you build the full mapping object in one declarative expression instead of multiple mutation statements.
SEO Implications
- 1
No Direct SEO Effect
These are purely object-construction ergonomics; any SEO benefit is indirect, via more maintainable server-side data-shaping code that is less likely to introduce structured-data bugs.
Best Practices
Use Property Shorthand When Returning Local Variables
Whenever a function assembles a return object from same-named local variables, shorthand removes redundant repetition and keeps the object literal visually scannable.
Use Computed Keys Instead of Post-Creation Assignment for Dynamic Fields
Building `{ [field]: value }` directly is more concise and arguably safer than creating an empty object and assigning `obj[field] = value` on a following line, since it happens in one atomic expression.
Frequent Bugs
Forgetting the brackets on a computed key, writing `{ field: value }` when `field` was meant to be a variable holding the desired key name, resulting in a literal key called "field" instead.
Wrap the variable in square brackets — `{ [field]: value }` — to signal that the key should be computed from the variable's value, not literally named "field".
Assuming method shorthand functions have their own 'super' binding issues like regular function expressions assigned to a property, when in practice shorthand methods actually support super correctly.
No fix needed — this is worth knowing as a genuine advantage of method shorthand syntax over `key: function() {}` when writing objects meant to be used with Object.setPrototypeOf or similar patterns.
Real-World Examples
Building a Redux-Style Reducer
A form-state reducer needed to update a single dynamic field, identified by name, without listing every possible field explicitly.
function formReducer(state, action) {
switch (action.type) {
case 'FIELD_CHANGE':
return { ...state, [action.field]: action.value };
default:
return state;
}
}