Shorthand property names

One enhancement in ES6 is the ability to use shorthand property names when creating object literals. Previously, if the property name and value were the same, we had to repeat the name twice. However, with ES6, we can omit the property name if it matches the variable name that holds the value.

const name = 'John';
const age = 30;

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

// ES6 shorthand
const person = { name, age };

console.log(person); // { name: 'John', age: 30 }

Using shorthand property names reduces code duplication and makes the object literal definition cleaner and more readable.

Computed property names

Another useful feature is the ability to use computed property names when defining object literals. Instead of having a fixed property name, we can use square brackets to dynamically set the property key based on an expression.

const key = 'name';
const value = 'John';

// Old way
const obj = {};
obj[key] = value;

// ES6 computed property names
const obj = { [key]: value };

console.log(obj); // { name: 'John' }

By using computed property names, we can build more flexible object literals that can adapt to different scenarios.

Concise methods

ES6 also allows us to define methods directly within an object literal without the need for the function keyword. This syntax is known as concise methods.

const calculator = {
  add(x, y) {
    return x + y;
  },
  subtract(x, y) {
    return x - y;
  }
};

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

Concise methods improve code readability and reduce the visual clutter of the traditional function syntax.

Conclusion

ES6 introduced several enhancements to object literals that make our code more concise and expressive. By leveraging shorthand property names, computed property names, and concise methods, we can create object literals with less duplication and more flexibility. These features contribute to cleaner and more maintainable code. So, embrace these improvements and start enhancing your object literals with ES6!

#enhancements #ES6