UI5
No Comments

6 Must Known New Features in ES6 – Part 5: Object Additions

ES6 part 5.

These are the newest and most crucial features in ES6 or also known as ECMAScript 6, ES2015, or JavaScript 6. This series of articles explains them super simple for you. Plus, each article states how to use the specific feature at its best.

This is article 5 of the series. ES6 has some neat object enhancements to offer: Property shorthands, short methods, and object destructuring.

Property shorthands

In ES5 object properties needed to be set like this:

// ES5

var sFoo = "foo";
var sBar = "bar";

// specify the names of the object properties
var oObject = {

  sFoo: sFoo,
  sBar: sBar

}

console.log(oObject.sFoo + " " + oObject.sBar); // foo bar

But now with ES6 it is not any longer necessary to specify the name of the object property. If the object property and the variable name of the value is the same one can simply do this:

// ES6

let sFoo = "foo";
let sBar = "bar";

// not necessary to specify the names of the object properties
let oObject = {

  sFoo,
  sBar

}

console.log(`${oObject.sFoo} ${oObject.sBar}`); // foo bar

Short Methods

With ES6 it is possible to set short methods as object properties. In ES5 this is the way how to set a function as an object property:

// ES5

var oObject = {

  fnFoo: function() {

    return "foo";

  }

}

console.log(oObject.fnFoo); // foo

Now in ES6 one can use short methods. It is similar to the property shorthands. Omit the object property name. Plus, do not use the function keyword:

// ES6

let oObject = {

  fnFoo() {

    return "foo";

  }

}

console.log(oObject.fnFoo); // foo

Object Destructuring

Object destructuring means to get object properties from an object without accessing manually each property. Let me show you an example in ES5 how accessing object properties was done:

// ES5

var oObject = {

  sFoo: "foo",
  sBar: "bar"

}

var sFoo: oObject.sFoo;
var sBar: oObject.sBar;

console.log(sFoo + " " + sBar); // foo bar

In ES6 you can destructure the object and assign its object property values in one line of code:

// ES6

let oObject = {

  sFoo: "foo",
  sBar: "bar"

}

let {sFoo, sBar} = oObject

console.log(`${sFoo} ${sBar}`); // foo bar

It is possible to use the object destructuring for function parameters as well. In ES5 this is how it works:

// ES5

function fnFunction(oObject) {

  return sObject.sFoo + " " + sObject.sBar;

}

let oObject = {

  sFoo: "foo",
  sBar: "bar"

}

console.log(fnFunction(oObject)); // foo bar

But in ES6 you can use object destructuring for the parameter:

// ES6

function fnFunction({sFoo, sBar}) {

  return `${sFoo} ${sBar}`;

}

let oObject = {

  sFoo: "foo",
  sBar: "bar"

}

console.log(fnFunction(oObject)); // foo bar

Most Recent Articles

Poll

Will SAPUI5 replace the SAP CRM Web UI soon?

Loading ... Loading ...

More Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu