JavaScript Object Literal Syntax Extension in ES6

Shorthand Properties

Object methods in ES5 require the function statement.

        
// ES5 code

var str = {
  sum:  function(a, b) { return a + b; },
  mult: function(a, b) { return a * b; }
};

console.log( str.sum(5, 5) ); 	 //Output :  10
console.log( str.mult(10, 15) ); //Output : 150        
    

While in ES6, it uses a shorthand technique.

        
// ES6 code
const str = {
  sum(a, b)  { return a + b; },
  mult(a, b) { return a * b; }
};

console.log( str.sum(5, 5) ); 	 //Output : 10
console.log( str.mult(10, 3) );	 //Output :  30        
    

Dynamic Property Keys

Sometimes you need to create an object with a specific property, but the name of that property is not a compile-time constant that you can type literally in your source code. Instead, the property name you need is stored in a variable or is the return value of a function that you invoke.

In ES5, it wasn’t possible to use a variable for a key name, although it could be added after the object had been created.

        
// ES5 code

var
  key1 = 'three',
  obj = {
    two: 5,
    three: 7
};

obj[key1] = 3;

console.log(obj.two);  	 //Output : 5
console.log(obj.three);  //Output : 3        
    
        
// ES6 code
const
  key1 = 'one',
  obj = {
    [key1]: 1,
    two: 5,
    three: 7
  };

// obj.one = 1, obj.two = 2, obj.three = 3

console.log(obj.two);    //Output : 5
console.log(obj.three);  //Output : 7        
    

Spread Operator

We can copy an array or object using the spread operator.

        
const str = {
  x: 1,
  y: 2,
  z: 3
};

const { x, ...a } = str;

console.log(x);	 // Output : 1
console.log(a);	 // Output : { y: 2, z: 3 }        
    

Destructuring

It’s often necessary to extract a property value from an object into another variable.

        
// ES6 code

const str = {
  one:   'x',
  two:   'y',
  three: 'z'
};
const { one, two, three } = str;

console.log(one);	// Output : x
console.log(two);	// Output : y
console.log(three);	// Output : z        
    
Posted in

Ankit Patel

Leave a Comment

Your email address will not be published.

Scroll to Top