ES6 Object Literals

Overview

Applications in javascript are getting more complex with time and use lots of objects, Which makes sense as almost everything in javascript are some types of objects. With more objects, comes necessity to use them more efficiently and ES6 focuses heavily on improving them.

Javascript has different types of objects used in standard as well as in the execution environment added by the browsers or Nodejs.
ES6 specifications have well defined each category of objects.

Object Categories

• Ordinary: Default behaviors of objects in Javascript.
• Exotic: Behaviors that differs from the Ordinary objects in some way.
• Standard: Objects such as Array, Date. They can be ordinary or exotic.
• Built-In: Standard objects that are present in execution environment such as browser or Nodejs.

Object Literals

The succinct syntax of object literals for creating objects in javascript has made it so popular that JSON adopted the same syntax. ES6 makes the object literals more powerful and more succinct by extending the syntax.

Deconstructing variables into keys and values

Before ES6.

Creating an object literal in javascript.

 var name = 'Prashant Yadav';
 var age = 23;
 var nationality = 'Indian';
 var designation = 'Software Engineer';

 var user = {
    name: name,
    age: age,
    nationality: nationality,
    designation: designation
 }
console.log(user);
//{name: "Prashant Yadav", age: 23, nationality: "Indian", designation: "Software Engineer"}

After ES6.

Creating an object literal in ES6.

 const name = 'Prashant Yadav';
 const age = 23;
 const nationality = 'Indian';
 const designation = 'Software Engineer';

 const user = {
    name,
    age,
    nationality,
    designation
 }
console.log(user);
//{name: "Prashant Yadav", age: 23, nationality: "Indian", designation: "Software Engineer"}

If variable name are same as the properties name then we can skip the assigning the value to the properties and use the above syntax to declare objects.

Declaring functions inside objects

Before ES6.

 var name = 'Prashant Yadav';
 var age = 23;
 var nationality = 'Indian';
 var designation = 'Software Engineer';

 var user = {
    name: name,
    age: age,
    nationality: nationality,
    designation: designation,
    detail: function(){
      return this.name + ' is an ' + this.nationality + ", working as " + this.designation;
    }
 }
console.log(user.detail());
// Prashant Yadav is an Indian working as Software Engineer

After ES6.

 let name = 'Prashant Yadav';
 let age = 23;
 let nationality = 'Indian';
 let designation = 'Software Engineer';

 var user = {
    name,
    age,
    nationality,
    designation,
    detail(){
      return this.name + ' is an ' + this.nationality + ", working as " + this.designation;
    },
 }
console.log(user.detail());
// Prashant Yadav is an Indian working as Software Engineer

We no longer need to declare function keyword, we can declare the function directly with above syntax.

We can also declare the => fat arrow function.

 const math = {
    add: (a, b) => a + b,
    mul: (a, b) => a * b,
    sub: (a, b) => a - b,
    div: (a, b) => a / b,
 }
console.log(math.add(1, 1)); // 2
console.log(math.mul(1, 1)); // 1 
console.log(math.sub(1, 1)); // 0
console.log(math.div(1, 1)); // 1

---

Dynamically define properties of an Object

Before ES6.

To dynamically define properties of the objects in ES5 or earlier we used to first create the object and then modify it.

var name = "name";
// create empty object
var user = {}
// update the object
user[name] = "Prashant Yadav";
console.log(user.name);
// Prashant Yadav

After ES6.

With ES6 we can do both the things same time. Computed property names are part of the object literal syntax.

var name = "first";
var suffix = 'name'
// create an empty object and assigning the value
var user = {
   [name]: 'Prashant',
   ['last '+suffix]: 'Yadav'
}
console.log(user.first + ' '+ user['last name']);
// Prashant Yadav

Declaring duplicate properties

Before ES6.

In ES5 and earlier declaring duplicate property names inside object literals in strict mode would throw error.

'use strict';
 var user = {
    name: 'prashant',
    name: 'golu'
 }

//syntax error

After ES6.

In ES6 we can declare duplicate property names inside object literals in strict as well as nonstrict mode. It will just overwrite the existing value.

'use strict';
 const user = {
    name: 'prashant',
    name: 'golu'
 }

console.log(user.name);
// golu

Check out the complete ES6 objects here.