The more technical readers among you will likely be aware that ECMAScript 6 (ES6) was recently released. Unfortunately, it wont be ready for use* until the major browsers have time to catch up. But in the meantime, developers have the perfect chance to get a head start and find out what’s coming! In this article, I’ve listed some of my favourite ES6 features.

The Fat Arrow Function

AKA arrow functions! We can now turn an ugly block of code like this:

this.$http.post('/api/users').then(function(response) {
    sendNotification('User created');
}).catch(function (error) {
    sendError('An error has occurred');
});

…into something a bit more expressive:

this.$http.post('/api/users')
    .then(response => sendNotification('User created'))
    .catch(error => sendError('An error has occurred'));

And for functions with multiple lines, simple surround the logic with your usual curly braces:

this.$http.post('/api/users').then(response => {
    sendNotification('User created');
    storeUser(user);
});

Of course, cosmetics aren’t the only purpose to this feature – it also affects scoping. Currently, functions have their own context, which they bind this to. It can be difficult to keep track of, especially when working with nested functions. Up until now, we’ve had to use workarounds such as .bind(this) or var that = this:

function foo() {
    this.count = 0;

    var that = this;

    setInterval(function() {
        that.count++;
    }, 500);
}

Well, no longer! ES6 arrow functions bind this to the enclosing lexical scope:

function foo() {
    this.count = 0;

    setInterval(() => this.count++, 500);
}

Much better! And while we’re on about scoping, let’s talk about…

Let & Const

let and const allow us to assign variables in a whole new way. var will scope a variable to the nearest function block (or scopes it globally if it is not defined within a function), whereas let and const is scoped to the nearest enclosing block:

if (true) {
    var foo = 'bar';
}

console.log(foo); // Outputs "bar"

Due to this, things can sometimes get messy when using temporary variables (such as the common temporary i variable in a loop). No longer!

if (true) {
    let foo = 'bar';
}

console.log(foo); // Throws ReferenceError - foo is not defined

…and the same goes for const. In fact the only difference is that const is a constant (yes, really!) whose value cannot be changed.

Default Parameters

Default function parameters can often come in handy a lot when writing your functions.Up until now, this wasn’t a thing in Javascript and we had to settle for something like this:

function foo(bar) {
    bar = bar || 'baz';

    console.log(bar);
}

foo(); // Outputs baz
foo('foo'); // Outputs foo

In ES6, we can define default parameters with a similar syntax to PHP or Ruby:

function foo(bar = 'baz') {
    console.log(bar);
}

foo(); // Outputs baz
foo('foo'); // Outputs foo

Template Literals

Template literals are effectively strings that can contain “placeholders”, in which we can include JavaScript expressions:

// ES5
console.log('2 + 2 is equal to ' + (2 + 2) + '.');

// ES6
console.log(`2 + 2 is equal to ${2 + 2}.`);

And thankfully, we now have a convenient way to have multi-line strings within JavaScript:

// ES5
var poem = "99 little bugs in the code.\n"
    + "99 little bugs in the code.\n"
    + "Take one down, patch it around.\n"
    + "127 little bugs in the code.";

// ES6
var poem = `99 little bugs in the code.
    99 little bugs in the code.
    Take one down, patch it around.
    127 little bugs in the code.`

Let’s be honest; that first method is just plain ugly.

Conclusion

This article just covers a few of my favourite ES6 features, but there are many that we haven’t looked at (such as block scoping, rest parameters, property shorthand, method properties, and more!). If you’re interested in learning some more, check out the ES6 Features website.

* Without the use of a tool like Babel to compile code down to ES5

Post a Response