If you have written some JavaScript code, most likely you are already familiar with object literals which make it easy to create objects with key: value pairs. ES6 syntax enhances object literals in a few interesting ways, let's look at each one of them.

Shorthand syntax for properties initialization

One of the ways object literals got enhanced is that now we can use shorthand syntax for initializing properties from variables. If property key has a corresponding variable, it automatically assigns the value of that variable to the corresponding key. If no variable has the same name as the property key defined, it will throw an error.

const foo = 'Foo';
const bar = 'Bar';

// ES5
const objectES5 = {
    foo: foo,
    bar: bar
}

// ES6 syntax
const objectES6 = {
    foo,
    bar
}

Shorthand syntax for defining function methods

Another useful and very easy to get used to shorthand syntax is for defining function methods. Now the property followed by : and function is no longer necessary. Let's look at the example and note how we declare a function simply by writing getDetails() rather than getDetails: function().

// ES5
const personES5 = {
  name: 'Homer',
  age: 42,
  getDetails: function() {
    return `${this.name}, ${this.age}`;
  }
}

// ES6
const personES6 = {
  name: 'Homer',
  age: 42,
  getDetails() {
    return `${this.name}, ${this.age}`;
  }
}

Computed properties

Another super useful property of enhanced object literals is computed properties. Now we can write an expression wrapped in square brackets and whatever that expression evaluates to, that will become the property name.

// ES5
const name = 'age';

const personES5 = {};
personES5[name] = '42';

// ES6 syntax
const personES6 = {
    [name]: '42'
}

That's it, a quick overview of enhaned object literals. They are nothing life changing so to speak but definitely helped to improve my code legibility and made JavaScript even nicer to write.