ES6: A short guide to its JavaScript implementation – 1/2

If you are using JavaScript very frequently you probably have heard or already used some the new features coming with ES6 support in JavaScript. With this post I want to give you a quick overview of the most important features and why they are awesome.

Make let not var

let declaration

In JavaScript you would define a local variable like this

var foo = "bar"; 

A variable declared like this is scoped to the nearest function block:

function foo() {
    var i = 123;
    for(var i = 0; i <= 100; i++) {
        console.log(i); // -> 0, 1, 2, 3, ....
    }
    console.log(i); // -> 101, overwritten by for-loop
}

A variable declared via let is scoped to the nearest block:

function foo() {
    var i = 123;

    for(let i = 0; i <= 100; i++) {
        console.log(i); -> // 0, 1, 2, 3, ....
    }
    console.log(i); // -> 123
}

Run this code on es6fiddle

As you can see, the let declaration of i does not overwrite the var declaration of i, because it is scoped to the for block. This comes in handy when you use thirdparty libraries and want to ensure that you do not overwrite anything.

Arrow functions – this & that finally solved by ES6.

The notation of arrow functions will be very familiar to you if you used coffeescript before. But there is a very important thing to note here: Arrow functions are anonymous functions which are bound to the parents scope.

General notation:

let someFunction = (param1,param2) => {
    // do something;
}

Note: You could skip the braces when having only one line of code AND it would be returned implicitly:

let someFunction = (param1, param2) => param1 + " is better than " + param2;
let test = someFunction("es6", "es5"); // -> "es6 is better than es5"

Why it is awesome:

Before arrow functions you probaply wrote code like this:

function someAsyncFunction(cb) {
    cb();
}

var leObject = function() {

    var that = this;

    this.leHandler = function() {
        console.log("Je suis finished!");
    }

    this.leFunction = function() {
       someAsyncFunction(function() {
         that.leHandler();
       });

    }
}

You would have to create a new local variable that which is the way of accessing the object leObject from a nested function. someAsyncFunction context would be its function scope. With arrow functions you could rewrite the code above like this:

function someAsyncFunction(cb) {
    cb();
}

var leObject = function() {
    this.leHandler = function() {
        console.log("Je suis finished!");
    }

    this.leFunction = function() {
        someAsyncFunction(() => this.leHandler());
    }
}

Run this code on es6fiddle

String templates

When you would want to log your variables var1 and var2 in a sane sentence to the console you could do it like this:

var var1 = "readability";
var var2 = "meh.";

console.log("The " + var1 + " of this line of code is " + var2);

In ES6 with string templates you could prettify the code to:

var var1 = "readability";
var var2 = "meh.";

console.log(`The ${var1} of this line of code is ${var2}`);

Just put ` around your string and wrap the variables with ${}. Job done!

Destructuring arrays & objects

Assigning a list of variables from an array is a good practice to make your code more understandable:

var data = ["firstname", "lastname", "street", "housenumber"];

var firstname = data[0];
var lastname = data[1];
var street = data[2];
var housenumber = data[3];

In ES6 with destructuring arrays you’ll be given a shortcut for this:

var data = ["firstname", "lastname", "street", "housenumber"];
var [firstname, lastname, street, housenumber] = data;

(Again, this is a thing coffeescript already has)

You could use this technique for objects in the same way:

ES5 version:

var data = {
    firstname: "John",
    lastname: "Doe",
    street: "Sesamstrasse",
    housenumber: 1
}

var firstname = data.firstname;
var lastname = data.lastname;
var street = data.street;
var housenumber = data.housenumber;

ES6 version:

var data = {
    firstname: "John",
    lastname: "Doe",
    street: "Sesamstrasse",
    housenumber: 1
}

var {firstname: first, lastname: last, street: str, housenumber: nmbr} = data;
// You now have the variables first, last, str and nmbr available

That’s it for today. In my next post I’ll give you a short explanation of object literals, the spread operator, default arguments in functions and of course – ES6 classes. So be sure to stay tuned.

Have a nice weekend!

Like what you read? – Donate

Trackbacks

Leave a Reply

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