New Features in ES6 / ECMAScript 2015

By Murari NayakTechnology
es6 features

We are going to take a look at the new ES6 Features, mainly the important ones.

1. Default Parameters

Earlier way

var calculate = function(x, y) {
    x = x || 10;
}

ES6 way

var calculate = function(x = 10, y) { ... }

2. Template Literals

Earlier version of string interpolations

var name = 'Name is ' + firstName + ' ' + lastName;

ES6 Way (usage of back-ticks)

var name = `Name is ${firstName} ${lastName}`

3. Multi-line strings

Earlier way

var text = 'This is the first line \n' + 
'This is the second line.';

ES6 way

var text = `This is the first line
and this is the second line`

4. Destructuring

// This will create 2 variables, username and password, and assign the username and password attribute from req.body to them
var { username, password } = req.body;

Can also be user in Arrays

var [val1, val2, , val3] = receivedArray;
// This will get the first, second and fourth element and assign them val1, val2  val3 respectively

5. Enhanced Object Literals

Earlier ways of object creating extending another object

var baseObj = { id: 1, name: 'Someone' };
var getRandomVal = function() { return Math.random() };
var newObj = {
    id: baseObj.id,
    value: baseObj.value,
    getRandomVal: getRandomVal,
    someOtherAttr: 'random text'
};

In ES6, it can be simplified as

var baseObj = { id: 1, name: 'Someone' };
var getRandomVal = function() { return Math.random() };
var newObj = {
    __proto__: baseObj, // Directly setting the __proto__
    getRandomVal, // Assignment of the function isn't required
    someOtherAttr: 'random text'
};

6. Arrow Functions

These make it easy to stabilize the value of this. Earlier the value of this was to be manually set from the function context. But with the use of arrow functions, the value of this can be set to the global object.

var modifiedItems = items.map(function(item) {
    return item * 2;
});

In ES6, it can be simplified to:

var modifiedItems = items.map(item => item * 2);

One can notice 2 distinct differences between the earlier way and the ES6 way.

Firstly, the attribute to the function isn’t bound by parentheses. For single parameter, it isn’t required. But for no any additional parameter or no parameters at all, then need to be bound by the moon braces.

Second, The part following the arrow mark, is the function definition. But in the above case, being a single line statement, is an expression and has no curly braces. For single line statements this can be done and the expression will evaluate and return the value. For multiple line function, one needs to use the curly braces along with the return statement.

Arrow functions are not suitable for object methods, because in the object methods, if you try to use the this.attrName, the arrow function will try to search the attrName in the global object, which would be undefined as the attrName exists inside the object.

The same problem also exists when trying to use in event-listeners. Most of the event-listeners has the context of the object firing the event in the this variable. But if we use the arrow function there, we won’t be able to access the object firing the event.

There are some other ES6 Features that haven’t been covered here. You can find a list of all the features here.

Additional Reading

Understanding the Weird Parts of JavaScript
Advanced JavaScript
Working with Arrays in JavaScript

Leave a Reply