JavaScript ES6+

Enhanced Object Literals

Cleaner, shorter syntax for creating objects

Find videos you like?

Save to resource drawer for future reference!

Enhanced Object Literals: Less Typing!

ES6 introduced three major improvements to object literal syntax: property shorthand, method shorthand, and computed property names. Write less code to create objects!

Three Enhancements

1. Property Shorthand - Skip repetition when key = value
2. Method Shorthand - Drop the function keyword
3. Computed Properties - Use expressions as keys

Property Shorthand

When key and variable name match

❌ Old Way - Repetitive

const name = 'Alice';
const age = 25;
const city = 'Boston';

const user = {
  name: name,    // Repetitive!
  age: age,      // Repetitive!
  city: city     // Repetitive!
};

console.log(user);
// { name: 'Alice', age: 25, city: 'Boston' }

✅ ES6 - Property Shorthand

const name = 'Alice';
const age = 25;
const city = 'Boston';

const user = {
  name,     // Same as name: name
  age,      // Same as age: age
  city      // Same as city: city
};

console.log(user);
// { name: 'Alice', age: 25, city: 'Boston' }

Property Shorthand Examples

When variable name matches property name

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Method Shorthand

Drop the function keyword for methods

❌ Old Way - function Keyword

const person = {
  name: 'Alice',
  
  greet: function() {
    console.log('Hello!');
  },
  
  sayName: function() {
    console.log(this.name);
  }
};

person.greet();    // Hello!
person.sayName();  // Alice

✅ ES6 - Method Shorthand

const person = {
  name: 'Alice',
  
  greet() {
    console.log('Hello!');
  },
  
  sayName() {
    console.log(this.name);
  }
};

person.greet();    // Hello!
person.sayName();  // Alice

Method Shorthand Examples

Cleaner method definitions

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Computed Property Names

Use expressions as property keys with [brackets]

❌ Old Way - Two Steps

const field = 'username';
const value = 'alice123';

// Create object first
const obj = {};

// Then add property
obj[field] = value;

console.log(obj);
// { username: 'alice123' }

✅ ES6 - Computed Properties

const field = 'username';
const value = 'alice123';

// Use [brackets] for computed key
const obj = {
  [field]: value
};


console.log(obj);
// { username: 'alice123' }

Computed Property Name Examples

Dynamic property keys using expressions

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Combining All Enhancements

Use property shorthand, method shorthand, and computed names together

Powerful Combination!

const name = 'Alice';
const age = 25;
const field = 'email';

const user = {
  // Property shorthand
  name,
  age,
  
  // Computed property
  [field]: 'alice@example.com',
  [`is${name}`]: true,
  
  // Method shorthand
  greet() {
    console.log(`Hi, I'm ${this.name}!`);
  },
  
  getInfo() {
    return `${this.name} is ${this.age} years old`;
  }
};

console.log(user);
// {
//   name: 'Alice',
//   age: 25,
//   email: 'alice@example.com',
//   isAlice: true,
//   greet: [Function: greet],
//   getInfo: [Function: getInfo]
// }

Real-World Example: API Response Builder

Practical use of all enhancements

javascript

code

DarkEditable

const response = createAPIResponse({ users: ['Alice', 'Bob'] });
console.log(response.isSuccess());  // true
console.log(response.getData());    // { users: ['Alice', 'Bob'] }

// Dynamic form builder
function buildFormData(formId, values) {
  const type = 'form';
  const submittedAt = new Date();
  
  return {
    // Property shorthand
    type,
    submittedAt,
    
    // Computed properties
    [formId]: values,
    [`${formId}_count`]: Object.keys(values).length,
    
    // Methods
    getValues() {
      return this[formId];
    },
    
    hasField(field) {
      return field in this[formId];
    },
    
    validate() {
      return Object.values(this[formId]).every(v => v !== '');
    }
  };
}

const form = buildFormData('loginForm', {
  username: 'alice',
  password: 'secret123'
});

console.log(form.validate());  // true
console.log(form.hasField('username'));  // true

Console Output

Click "Run Code" to see output here...

Key Takeaways

🎯

Property Shorthand

When variable name = key name
{ name } instead of { name: name }

⚡

Method Shorthand

Drop function keyword
greet() { } instead of greet: function() { }

🔧

Computed Names

Use expressions as keys
[key]: value or [`prefix_${name}`]: val

Pro Tip

Combine all three enhancements for maximum conciseness! They work perfectly together in the same object.

Previous Topic

Default Parameters

Setting default values for function parameters.

Next Topic

For...of Loop

Iterating over iterable objects with clean syntax.

Ask a Question

Have a question about Enhanced Object Literals? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript ES6+

Enhanced Object Literals

Cleaner, shorter syntax for creating objects

Find videos you like?

Save to resource drawer for future reference!

Enhanced Object Literals: Less Typing!

ES6 introduced three major improvements to object literal syntax: property shorthand, method shorthand, and computed property names. Write less code to create objects!

Three Enhancements

1. Property Shorthand - Skip repetition when key = value
2. Method Shorthand - Drop the function keyword
3. Computed Properties - Use expressions as keys

Property Shorthand

When key and variable name match

❌ Old Way - Repetitive

const name = 'Alice';
const age = 25;
const city = 'Boston';

const user = {
  name: name,    // Repetitive!
  age: age,      // Repetitive!
  city: city     // Repetitive!
};

console.log(user);
// { name: 'Alice', age: 25, city: 'Boston' }

✅ ES6 - Property Shorthand

const name = 'Alice';
const age = 25;
const city = 'Boston';

const user = {
  name,     // Same as name: name
  age,      // Same as age: age
  city      // Same as city: city
};

console.log(user);
// { name: 'Alice', age: 25, city: 'Boston' }

Property Shorthand Examples

When variable name matches property name

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Method Shorthand

Drop the function keyword for methods

❌ Old Way - function Keyword

const person = {
  name: 'Alice',
  
  greet: function() {
    console.log('Hello!');
  },
  
  sayName: function() {
    console.log(this.name);
  }
};

person.greet();    // Hello!
person.sayName();  // Alice

✅ ES6 - Method Shorthand

const person = {
  name: 'Alice',
  
  greet() {
    console.log('Hello!');
  },
  
  sayName() {
    console.log(this.name);
  }
};

person.greet();    // Hello!
person.sayName();  // Alice

Method Shorthand Examples

Cleaner method definitions

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Computed Property Names

Use expressions as property keys with [brackets]

❌ Old Way - Two Steps

const field = 'username';
const value = 'alice123';

// Create object first
const obj = {};

// Then add property
obj[field] = value;

console.log(obj);
// { username: 'alice123' }

✅ ES6 - Computed Properties

const field = 'username';
const value = 'alice123';

// Use [brackets] for computed key
const obj = {
  [field]: value
};


console.log(obj);
// { username: 'alice123' }

Computed Property Name Examples

Dynamic property keys using expressions

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Combining All Enhancements

Use property shorthand, method shorthand, and computed names together

Powerful Combination!

const name = 'Alice';
const age = 25;
const field = 'email';

const user = {
  // Property shorthand
  name,
  age,
  
  // Computed property
  [field]: 'alice@example.com',
  [`is${name}`]: true,
  
  // Method shorthand
  greet() {
    console.log(`Hi, I'm ${this.name}!`);
  },
  
  getInfo() {
    return `${this.name} is ${this.age} years old`;
  }
};

console.log(user);
// {
//   name: 'Alice',
//   age: 25,
//   email: 'alice@example.com',
//   isAlice: true,
//   greet: [Function: greet],
//   getInfo: [Function: getInfo]
// }

Real-World Example: API Response Builder

Practical use of all enhancements

javascript

code

DarkEditable

const response = createAPIResponse({ users: ['Alice', 'Bob'] });
console.log(response.isSuccess());  // true
console.log(response.getData());    // { users: ['Alice', 'Bob'] }

const form = buildFormData('loginForm', {
  username: 'alice',
  password: 'secret123'
});

console.log(form.validate());  // true
console.log(form.hasField('username'));  // true

Console Output

Click "Run Code" to see output here...

Key Takeaways

🎯

Property Shorthand

When variable name = key name
{ name } instead of { name: name }

⚡

Method Shorthand

Drop function keyword
greet() { } instead of greet: function() { }

🔧

Computed Names

Use expressions as keys
[key]: value or [`prefix_${name}`]: val

Pro Tip

Combine all three enhancements for maximum conciseness! They work perfectly together in the same object.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Default Parameters

For...of Loop

JavaScript Code Editor

Building Your Learning Module...

Enhanced Object Literals

Enhanced Object Literals: Less Typing!

Three Enhancements

❌ Old Way - Repetitive

✅ ES6 - Property Shorthand

Property Shorthand Examples

❌ Old Way - function Keyword

✅ ES6 - Method Shorthand

Method Shorthand Examples

❌ Old Way - Two Steps

✅ ES6 - Computed Properties

Computed Property Name Examples

Powerful Combination!

Real-World Example: API Response Builder

Key Takeaways

Property Shorthand

Method Shorthand

Computed Names

Pro Tip

Default Parameters

For...of Loop

JavaScript Code Editor

Enhanced Object Literals

Enhanced Object Literals: Less Typing!

Three Enhancements

❌ Old Way - Repetitive

✅ ES6 - Property Shorthand

Property Shorthand Examples

❌ Old Way - function Keyword

✅ ES6 - Method Shorthand

Method Shorthand Examples

❌ Old Way - Two Steps

✅ ES6 - Computed Properties

Computed Property Name Examples

Powerful Combination!

Real-World Example: API Response Builder

Key Takeaways

Property Shorthand

Method Shorthand

Computed Names

Pro Tip