A couple of month ago I attended an interview for a front end developer position and had an interesting experience.

Interviewer: Can you write some code for this function? Me: (Writing JavaScript code on the whiteboard…) Interviewer: I’m sorry but would you please write in JavaScript? Me: Oh, actually this is JavaScript. It’s ES6 syntax. Interviewer: Well, would you please write in plain JavaScript? ……

Eventually I didn’t show him the “pure” JavaScript code. It was not because of I didn’t know about “pure” JavaScript, but because I don’t feel like to work for guys who don’t know about ES6, or at least, don’t want to use ES6. Since 2015, ES6 (ECMAScript 6) has been out for years and it has been accepted by most developers and has been proven safe and effective. I have some experience of converting legacy JavaScript code to ES6 style and it did save us significant amount of time solving the bugs caused by quirky JavaScript.

In this post I will show you some reasons why you should switch to ES6 (and more) if you have not done so. Also I will refer the “pure” JavaScript as ES5 because ES5 was the specification before ES6 was released.

Is It Safe to Use ES6 Now?

ES6, also known as ECMAScript 6, or ES2015, is the latest JavaScript specification released in 2015.

One common question about using another language is compatibility. The same question raised for ES5 and CoffeeScript too. Well, CoffeeScript is dead, so this question is reasonable. And here’s the answer:

ES6 is safe.

Take a look at this chart. All the current browsers have full support to ES6. Well if you take a closer look you may find some “unsupported” or “partially supported” features but I bet you will never have chance to use those unsupported features. The most popular features (I will explain later) are supported by all the current browsers very well. If you are a nodejs developer, as long as you are using node 6.4+ you can use ES6 safely.

ES6 compatibility chart. (source)

Even if you are targeting legacy browsers such as IE11, you can still use ES6 with the amazing babel compiler. It is called a “compiler” because it converts ES6 code to ES5 code so that as long as your browser can support ES5, you can use ES6 code safely.

Okay, so What is Amazing in ES6?

The full feature list can be found at this site but I will list up some most popular features to give you some ideas.

Classes

This is one of the most important reason why I love ES6. ES6 introduced class keyword so that no need to use prototype inheritance when creating a class.

// ES6

class Shape {

constructor() {}

draw() {}

} class Circle extends Shape {

draw() {

super.draw();

...

}

} // ES5

var Shape = function() {...};

Shape.prototype.draw = function() {...};

...

Arrow Functions

Another important reason why I love ES6. JavaScript has a very weird feature that this keyword is not always the object itself. For example (I used jQuery syntax),

function Foo() {};

$.extend(Foo.prototype, {

getData: function() {

$.get('/data', function(response) {

this.data = response.data;

});

},

});

Note that we defined a class by extending Foo.prototype . This code will not work. When $.get() returns, it will invoke the callback, but in the callback this will be global context instead of the local context of Foo (you don’t need to understand “context” but if you want to you can take a look at this post), so this.data = response.data will NOT assign the data to this.data and you will get an error like “undefined does not have attribute data” or so.

To solve this problem, you must use some trick like this:



var self = this;

$.get('/data', function(response) {

self.data = response.data;

});

Luckily, ES6 provides Arrow Functions, a new way to declare functions, to solve this problem:

$.get('/data', (response) => {

this.data = response.data;

});

There are two points in above code:

=> replaced function keyword and provided a convenient way of making functions: (param1, param2) => { function_body; }

replaced keyword and provided a convenient way of making functions: In the function body, this is “Lexical this ”, which means this will behave exactly as the code

As a result, with => we can write JavaScript code safely without worrying when to use var self = this trick.

String Interpolations

A very handy feature. The code explains itself:

// ES6

console.log(`Hello ${name}, today is ${today}`); // note the '`'

// ES5

console.log('Hello ' + name + ', today is ' + today);

Array / Object Destructing

Another syntax sugar that makes life easier. Instead of writing

var x = point[0], y = point[1];

var name = obj.name, age = obj.age;

We can use a much simpler syntax which produces exact the same result:

var [x, y] = point;

var { name, age } = obj;

And Many Other Features…

I only listed the most commonly used features in my everyday work, but there are more features that you will find very useful: spread operator, function default parameter, promise…

Then How Should I Start with ES6?

The best and safest way of introducing ES6 is using babel. The babel usage is beyond scope of this post, but you can find many good resources by googling “ES6 babel”, such as: