Object Literal Enhancements

Object Literal Enhancements

ES6 introduced three improvements to object literals that make creating objects more concise and expressive.

1. Property Shorthand

When a property name matches the variable name, you can omit the colon and value:

const name = "Alice";
const age = 25;
const role = "admin";

// Old way:
const user = {
    name: name,
    age: age,
    role: role,
};

// ES6 way:
const user = { name, age, role };
// { name: "Alice", age: 25, role: "admin" }

Mix Shorthand and Regular

const x = 10;
const y = 20;

const point = {
    x,           // shorthand
    y,           // shorthand
    label: "A",  // regular
};
// { x: 10, y: 20, label: "A" }

2. Method Shorthand

Define methods without the function keyword:

// Old way:
const calculator = {
    add: function(a, b) {
        return a + b;
    },
    subtract: function(a, b) {
        return a - b;
    },
};

// ES6 way:
const calculator = {
    add(a, b) {
        return a + b;
    },
    subtract(a, b) {
        return a - b;
    },
};

calculator.add(5, 3);       // 8
calculator.subtract(10, 4); // 6

3. Computed Property Names

Use expressions as property names by wrapping them in brackets:

const key = "color";

// Old way:
const obj = {};
obj[key] = "blue";

// ES6 way:
const obj = {
    [key]: "blue",
};
// { color: "blue" }

Dynamic Property Names

const prefix = "user";

const data = {
    [`${prefix}Name`]: "Alice",
    [`${prefix}Age`]: 25,
    [`${prefix}Role`]: "admin",
};
// { userName: "Alice", userAge: 25, userRole: "admin" }

// With expressions:
const i = 0;
const items = {
    [`item_${i}`]: "first",
    [`item_${i + 1}`]: "second",
};
// { item_0: "first", item_1: "second" }

Practical Example: Factory Function

function createUser(name, email, role = "viewer") {
    return {
        name,       // Property shorthand
        email,      // Property shorthand
        role,       // Property shorthand
        createdAt: new Date(),

        greet() {   // Method shorthand
            return `Hi, I'm ${this.name}!`;
        },

        hasRole(check) {  // Method shorthand
            return this.role === check;
        },
    };
}

const user = createUser("Alice", "alice@example.com", "admin");
user.greet();              // "Hi, I'm Alice!"
user.hasRole("admin");     // true

Practical Example: Dynamic Form Data

function handleInput(fieldName, value) {
    // Computed property name — dynamic key
    return {
        [fieldName]: value,
        lastUpdated: Date.now(),
    };
}

handleInput("email", "a@b.com");
// { email: "a@b.com", lastUpdated: 1710272400000 }

handleInput("phone", "555-1234");
// { phone: "555-1234", lastUpdated: 1710272401000 }

Summary of Enhancements

Enhancement	Before ES6	ES6
Property shorthand	{ name: name }	{ name }
Method shorthand	{ greet: function() {} }	{ greet() {} }
Computed names	obj[key] = val (separate)	{ [key]: val } (inline)

Key Takeaways

• Property shorthand: { name } instead of { name: name }
• Method shorthand: { greet() {} } instead of { greet: function() {} }
• Computed properties: { [expression]: value } for dynamic keys
• All three features make object creation more concise and readable
• Combine them in factory functions for clean, expressive code