Techie BabajiLearn to Code. Build Real Skills.
ES6+ (Modern JavaScript) · Working with Data

Enhanced Object Literals

ES6 made writing objects shorter and more flexible. Three small features — shorthand properties, shorthand methods and computed keys — appear in almost every modern file.

Intermediate 5 min Lesson 9 of 23 Runnable examples
Before you start:JavaScript: ObjectsArrow Functions
0/23 in ES6+
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Use property shorthand { name } instead of { name: name }
  • Write methods with shorthand syntax
  • Create keys dynamically with [computed] names
  • Build objects from lists with computed keys

Explanation#

Property shorthand: if a variable has the same name as the key, write it once — { name, age } means { name: name, age: age }.

Method shorthand: greet() { … } instead of greet: function () { … }. These methods get a normal this.

Computed property names: put an expression in square brackets to use its value as the key — { [field]: value } or { [`${field}Error`]: msg }.

Together they make it easy to build objects from variables and loops, e.g. form state where the key comes from the input’s name.

Syntax#

JavaScript Illustrative
const user = {
  name,                 // shorthand property
  greet() { },          // shorthand method
  [key]: value,         // computed key
};

Code example: Shorter, smarter objects#

JavaScriptShorter, smarter objects Runnable
const name = 'Asha', age = 24;
const user = {
  name,
  age,
  greet() {
    return `Hi, I am ${this.name}`;
  },
};
console.log(user.greet());


const field = 'email';
const form = { [field]: 'asha@example.com', [`${field}Verified`]: true };
console.log(form);


const stats = ['likes', 'shares'].reduce((acc, key) => ({ ...acc, [key]: 0 }), {});
console.log(stats);
Expected output
Hi, I am Asha
{ email: 'asha@example.com', emailVerified: true }
{ likes: 0, shares: 0 }
Opens this example in the full playground

Step-by-step explanation#

  1. { name, age } copies the variables in with matching keys.
  2. greet() is a shorthand method, so this is the user object.
  3. [field] becomes the key "email" — the value of the variable, not the word field.
  4. A template literal inside [ ] builds "emailVerified".
  5. reduce + computed keys turns a list of names into an object of counters.

Real-world use case#

React forms update state with setForm({ ...form, [e.target.name]: e.target.value }) — one handler for every input.

Common mistakes#

Forgetting the brackets

{ field: 'x' } creates a key literally called field. Use [field] to use the variable’s value.

Arrow functions as methods

greet: () => this.name does not see the object. Use the method shorthand greet() { … }.

Shorthand with an undefined variable

{ total } throws ReferenceError if no total variable exists.

Best practices#

  • Use property shorthand whenever names match
  • Use method shorthand for object methods
  • Use computed keys for dynamic form fields and lookups
  • Keep computed key expressions simple

Remember this#

{ name } = { name: name }.

[expression]: value → the key is computed at runtime.

Methods in objects: greet() { }, not greet: () => { }.

Practice exercise#

Your task: Write a function handleChange(form, inputName, value) that returns a new form object with that field updated.

Need a hint?
Spread the old form and use a computed key.
Show solution
JavaScript Runnable
const handleChange = (form, inputName, value) => ({ ...form, [inputName]: value });
console.log(handleChange({ name: '', email: '' }, 'email', 'a@b.com'));
// { name: '', email: 'a@b.com' }
Opens this example in the full playground

Mini quiz#

Enhanced Object Literals quizPredict the output Question 1 of 3

What is printed?

const key = 'color';
const o = { [key]: 'red' };
console.log(Object.keys(o));
Score so far: 0/0

Want more? Practise all ES6+ MCQs · ES6+ interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.