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!


Originally published at victorleungtw.com on February 10, 2015.

By Victor Leung

Experience in software development, consulting services and technical product management. Understanding of business and technology with an MBA in Finance and a Master degree in Computer Science. AWS Certified Solution Architect with experience in building products from scratch and serving as a charismatic leader.

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.