Useful features in JavaScript ES6

Made by Marvin Drude

Useful features in JavaScript ES6

Constants

The support of constant variables was added in ES6. This allows to define variables which cannot be altered after first initialization. Although be careful, if for example you define an object as constant, you can still alter the object itself, for example adding new properties.

const name = "Test";
// name cannot be assigned a new value

const obj = { };

obj.name = "hello"; // still allowed

String Interpolation

Everyone knows the string concatenation from before:

var x = "Test";
var y = 33;

var target = x + " and " + y;

In ES6 we can easily use “ and ${variable}.

var target = `${x} and ${y}`;

Easier object properties

You have access to a new shorthand in JavaScript syntax, which allows you to produce much easier to maintain code as before.

var x = 20;
var r = 30;
// before
var o1 = { x: x, r: r };

// new shorthand
var o2 = { x, r };

This not only works with normal variable but with entire functions you want to declare in the object.

// before
var o1 = {
    "getName": function(x) { }
};

// new shorthand
var o2 = {
    getName(x) {

    }
};

New class syntax

The new JavaScript version allows you to easily define normal, super and sub classes without dealing with the old non-intuitive syntax. Showing the difference between ES5 and ES6 classes can be seen here in my other post going into detail. It is definitely worth checking out because it is so much easier in ES6.

New function expresssion

Coming along with the new version, there is a new way to define functions in variables. But keep in mind this way of defining, automatically inherits the “this”-context.

var some = function(a, b) {
    this.c = a + b;
}.bind(this);

// same as
var some = (a, b) => {
    this.c = a + b;
};

Promises

We’ve all been there… in the callback hell of JavaScript. With Promises we are able to get rid of these kind of unreadable messes. Below is a very simple example which does not go into detail about every possibility of Promises and their advantages.

// callback
var getInfo = function(a, cb) {
    setTimeout(function() {
        cb(a * 2);
    }, 1000);
}

getInfo(20, function(res) {
    console.log(res);
});

// Promise
var getInfoPromise = function(a) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            resolve(a * 2);
        }, 1000);
    });
}

getInfoPromise(20).then((res) => {
    console.log(res);
});

// Chaining
getInfoPromise(20).then((res) =>
    getInfoPromise(res)).then((res) => {
        console.log(res); // after 2000ms logs 80
    });

Default parameter values

It is now possible to declare default values of optionial parameters without checking yourself. Here you can find a whole article going into detail.

Conclusion

This article does not cover nearly everything new in ES6, but these are most of the changes I use in every day programming myself. I hope I could show you some new features you did not know about before.