21/10/2014 UPDATE: This post was updated ( see the new examples for arrow functions and template strings ).
ES6, all good parts?
Again, I am not saying ES6 has only good parts. To be honest, I don’t know. ES6 is not completely ready for live applications. Design patterns will automatically evolve once the language is used extensively. Design patterns can distinguish between the good and bad parts.
As of now, most ES6 features are not supported by browsers (as they’re in draft). We use transpiler tools to compile ES6 code to ES5. While there are many tools available, Google’s traceur seems to be the most popular among them.
8 fancy things fixed in ES6
Here are some interesting improvements done in ES6:
Object.is for better comparison
=== is a strict comparison operator where it checks the type of the operands also. For example, in this code:
It is always recommended to use the
=== operator. However, there is an excepton to this; we cannot compare
NaN using any of these operators. We need to use the global function
isNaN to check if any variable has a
NaN value or not.
Object.is is an attempt to have a better comparison method. It is the same as the
=== operator, except it can compare
Let for block scoping.
Following is a popular example of this:
Assume that we have 10 anchor tags in an html page. We need to alert the index of each anchor tag whenever it’s clicked. Now, look at the code below:
If we think the above code works, we are wrong. It is the last value of
i that is alerted. Here we will see 10 getting alerted.
We use a closure to fix this problem. Using closure, we can bind the right value of
i to the onClick handler. See the code below:
Having a closure in the above code makes it unreadable and totally fancy to a new developer. Now we know why the word “fancy” is here.
let. If we write our first example, using
let also binds the scope of the variable to the current block. In our second example, we can use
let to solve the scoping problem:
Now the above code should work as expected.
Multi-line strings and string interpolations
Writing multiline strings is not so straightforward. The
\n ( for newline ) has to be added where ever a line break is needed.
ES6 introduces template strings for creating multiline strings. In ES6, we can write the above example like this:
So, here, we can use “`” (backtick) to create the strings.
Another interesting usecase of the template strings is variable interpolation. There is no native variable interpolation in ES5, but can be achieved by regular expressions or by manually appending the variable to the string. For example:
In ES6, the above code is really simplified, and can be written like this:
Fat Arrow functions for binding scope
Most new developers struggle to understand the
this is nothing but the execution context for a function, and for methods,
this points to the object holding it. If the function is executed not as a method of an object,
this will point to the global object (usually the window object).
this can be confusing many times. Look at the below example:
sayName is executed as an object method,
this was pointing to object itself, so
this.name will output “Jerry”. Inside the
greet function, a
setTimeout is used for delaying the function execution.
setTimeout will invoke the function in global context, hence
this will point to the global object.
We usually use
Function.apply to fix these kinds of problems.
ES6 added arrow functions to get rid of scoping issues. An arrow function will always lexically bind the
this value to its surrounding environment. So the above code can be written in ES6 like this:
Here, inside the arrow function,
this always points to the parent scope
Note: Since the arrow function is already bound to its execution context, we cannot apply .bind(), .call() or .apply() methods on it again.
In the above code, whenever a function requires arguments as multiple parameters, we need to extract values from our config object and pass them as parameters. This is a problem when we have a large number of values that need to be extracted.
ES6 allows direct destructing assignments. So we can write the above example in a simple way, like this:
Default Argument Values for Functions
One of the best features in ES6 is default arguments. As of now, we use the
|| to have default values for the function parameters. See the below code:
Here is the same code written in ES6:
Object method shorthands
Look at the below object creation pattern. In this, all the public method/property of an object will have their own private counterparts. For example:
The above pattern is called Revealing module pattern. In ES6, it is much simplified by eliminating the column part. Thus, we can write the above code like this:
The super keyword for invoking super class methods
super keyword, however, it is not functional.
These frameworks use
_super (or sometimes
uber) to invoke the parent method. This is because,
super keyword has been implemented in ES6. Now let’s see how inheritance can be done:
Again, all these are just a small part of the ES6 feature-set. There are so many interesting features like Promises, Classes, Generator, Iterators, etc.