12 Things You Need To Know About ECMAScript 6

ECMAScript 6 is the next version of the JavaScript standard.

Here are the 12 cool things you need to know about ES6:

1. Arrow functions

Similar to CoffeeScript, you can define a function using fat arrow syntax.

    var square = (n) => n * n;

2. Arrow scope

Keyword ‘this’ is confusing, and it refers to something that invokes it. For example, ‘this’ refers to the window when we are using setTimeout. The issue is resolved by the arrow function expression, which binds ‘this’ to the function.

    function yo(){
      this.name = 'Victor';
      setTimeout(function()=>{
        console.log('yo' + this.name);
      }, 5000); }

    // yo Victor

3. String templates

Like CoffeeScript, ES6 has string interpolation feature using the ${ } syntax for the variables. Notice the below example is using back-tick character instead of single quotes on line 2.

    var person = {name: 'Victor', age: 24};
    var hello = `My name is ${person.name} and I am ${person.score} years old`;

4. Let scope

The let statement declares a block scope local variable. In order words, it does not overide the value of the variable in the outer scope.

    var x = 10;
    for (var i = 0; i< 10; i++){
      let x = i * 2;
    }
    console.log(x); // x is still 10 instead of 18

5. Destructuring arrays

Instead of declaring three variables one by one, you can assign them in one line like this:

    var [one, two, three] = [1, 2, 3];

6. Destructuring objects

Similarly, you can assign it for object as well:

    var {firstName: name} = {firstName: 'Victor'};

7. Object literals

There is a shorthand way to construct an object instead of {firstName: firstName, lastName: lastName}.

    var firstName = 'Victor', lastName = 'Leung';
    var person = { firstName, lastName }

8. Default args

You can assign default value in the arguement like this:

    function sayHello(name, greetings = 'yo man'){
      return `${greeting} ${name}`;
    }

9. Spread operator

You can pass each element of an array as argument using the … syntax.

    function threeNumbers(x, y, z){
      console.log(x, y, z) // 123
    }
    var args = [0, 1, 2];
    threeNumbers(...args);

10. Classes

Similar to other object-oriented programming languages, you can define a blueprint for constructing objects with class using the new syntax:

    class Person { sayHey(name){ return 'hey ' + name; } }

11. Class inheritance

And use the extends keyword to extend a class.

    class Victor extends Person {
      sayHey(){
        return super('Victor');
      }
    }

12. Generators

Generators are functions which can be exited and later re-entered. Calling a generator function does not execute its body immediately. When the iterator’s next() method is called, the generator function’s body is executed until the first yield expression. Here is an example of generator with the * syntax:

    function* idMaker(){
      var index = 0;
      while(true) yield index++;
    }

    var gen = idMaker();

    console.log(gen.next().value); // 0
    console.log(gen.next().value); // 1
    console.log(gen.next().value); // 2

There are a lot of new features for ECMAScript 6. Please refer to the MDN for more details. The official publication process support in Mozilla starting in March 2015 and to be finished in June 2015. Stay tuned!