Enhanced Object Literals0%
Arrow Functions Advanced

Enhanced Object Literals

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Enhanced Object Literals in ES6

ECMAScript 2015 introduced several syntactic enhancements to object literal notation, making object creation concise, expressive, and less repetitive.

1. Property Value Shorthand

Before ES6, assigning a variable to an object property with the same name required duplicating the identifier:

JavaScript
const name = "Full-Stack Web Development";
const duration = "12 Months";
const price = 49999;
 
// The Old Way (ES5):
const courseOld = {
name: name,
duration: duration,
price: price
};
 
// The Enhanced ES6 Shorthand:
const courseNew = {
name,
duration,
price
};

If the property name matches the variable name, write it once!

2. Method Definition Shorthand

You can define methods without typing the function keyword or colon : :

JavaScript
// The Old Way:
const calculatorOld = {
add: function(a, b) {
return a + b;
}
};
 
// The Modern Shorthand:
const calculatorNew = {
add(a, b) {
return a + b;
},
subtract(a, b) {
return a - b;
}
};

3. Computed Property Names ([expression])

Before ES6, to create an object whose property key was dynamic or computed from an expression, you had to instantiate the object first and then use bracket notation on a separate line:

JavaScript
// The Old Way:
const prefix = "user_";
const dynamicKey = prefix + "role";
 
const userOld = {};
userOld[dynamicKey] = "admin";

With ES6 Computed Property Names:

You can calculate the property key directly inside the object literal using square brackets [...]:

JavaScript
const prefix = "user_";
const roleType = "admin";
 
const userNew = {
id: 101,
[`${prefix}status`]: "active",
[`${prefix}role`]: roleType,
[1 + 2]: "three"
};
 
console.log(userNew.user_status); // "active"
console.log(userNew.user_role); // "admin"
console.log(userNew[3]); // "three"

4. Real-World Use Case: Dynamic Form Handlers

Computed properties are universally used in form handlers (like React onChange events):

JavaScript
function handleInputChange(fieldName, value) {
// Update state immutably using computed property:
formData = {
...formData,
[fieldName]: value
};
}
 
handleInputChange("email", "sumit@mskinstitute.com");
Interactive Quiz

Practice Quiz

Question 1
What does property value shorthand allow you to write instead of { title: title }?
Question 2
What is the concise ES6 method shorthand syntax for defining a method greet inside an object?
Question 3
How do you create an object property key dynamically from an expression directly within the object literal?
Question 4
If const key = "marks"; const obj = { [key]: 95 };, what is the output of obj.marks?
Question 5
Can computed property names contain complex string concatenations or function calls?
Next Lesson

Arrow Functions Advanced

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Default ParametersArrow Functions Advanced

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext