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, ES6 allows you to define a function using the fat arrow syntax.

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

2. Arrow Scope

The keyword ‘this’ can be confusing as it refers to whatever invokes it. For example, ‘this’ refers to the window object when using setTimeout. This issue is resolved by the arrow function expression, which binds ‘this’ to the function itself.

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

3. String Templates

Like CoffeeScript, ES6 includes a string interpolation feature using the ${} syntax for variables. Notice that the example below uses a 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.age} years old`;

4. Let Scope

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

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

5. Destructuring Arrays

Instead of declaring multiple 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 use destructuring for objects as well:

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

7. Object Literals

You can use shorthand notation to construct an object, instead of writing {firstName: firstName, lastName: lastName}.

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

8. Default Arguments

You can assign default values to arguments like this:

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

9. Spread Operator

The spread operator (...) allows you to pass each element of an array as an argument.

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

10. Classes

Much like other object-oriented programming languages, ES6 allows you to define a blueprint for constructing objects using the new class syntax.

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

11. Class Inheritance

You can use the extends keyword to extend a class.

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

12. Generators

Generators are functions that 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.

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 many new features in ECMAScript 6. For more details, please refer to the MDN. The official publication process began in Mozilla in March 2015 and is expected to be completed in June 2015. Stay tuned!