What is the difference between property shorthand and computed properties?
Two ES6 conveniences for writing object literals.
Shorthand — when a key matches a variable name, write { name } instead of { name: name }.
Computed — use an expression as a key with square brackets: { [key]: value }.
In short: shorthand reduces repetition; computed keys set property names dynamically.
const name = 'John';
const age = 30;
// Property shorthand
const user = { name, age }; // Same as { name: name, age: age }
console.log(user); // { name: 'John', age: 30 }
// Computed property names
const field = 'email';
const obj = {
[field]: 'john@test.com', // Computed key
[`${field}Verified`]: true, // Expression as key
[Symbol('id')]: 42 // Symbol key
};
console.log(obj.email); // 'john@test.com'
console.log(obj.emailVerified); // true
// Practical: dynamic state update
function handleChange(field, value) {
setState({ [field]: value }); // Dynamic key from variable
}Shorthand: { name } is { name: name } — when variable name matches the desired property name. Computed: [expression] evaluates the expression as the property name — enables dynamic keys.
Combined with template literals for derived names. The setState pattern is a real-world React use case.
Shorthand: { name } = { name: name }. Computed: [expression] for dynamic keys.
The React setState({ [field]: value }) pattern is the most practical example. Both are ES6 features.