Using Cool ECMAScript 6

What is ECMAScript?

In brief, ECMAScript is a standard for JavaScript, and JavaScript is actually an implementation of ECMAScript. Here’s a JavaScript history timeline from webapplog.com, which will help you to understand it.

1. JavaScript was born as LiveScript in 1995
2. In 1997, ECMAScript standards were established
3. In 1999 ES3 came out and IE5 became very popular
4. Between 2000 and 2005, XMLHttpRequest, a.k.a. AJAX, gained popularity in apps such as Outlook Web Access (2000) and Oddpost (2002), Gmail (2004) and Google Maps (2005).
5. ES5 began to appear in 2009, which is the mot widely used standard now
6. In 2015,  ES6/ECMAScript2015 came out

Now let’s get to the code. In this article, I will introduce some core ES6 features as shown below.

1. Block-Scoped Constructs Let and Const
2. Template Literals & Multi-line Strings
3. Destructuring for Easier Data Access
4. Default Parameters
5. Rest parameters
6. Arrow Functions
7. JavaScript Classes

Block-Scoped Constructs Let and Const

Traditionally, we use var to declare a variable in JavaScript. This way, the variable will be treated as if it’s at the top of the function regardless of where the actual declaration occurs. This is called hoisting. For example:

In this example, the declaration of the name is hoisted to the top. This value can be changed in the while clause since ES5 only supports global scope and function scope, which don’t have a block level scope. This will cause many unreasonable scenarios. One is that the inner variables cover outer variables. Another is that variables within for loops will be leaked to global variables, as in the  below example:

As we expected, only the for loop should have access to the i variable. However, after the loop execution, the variable can still be accessed. The reason is that the var declaration gets hoisted. In ECMAScript 6, we can control a variable’s lifecycle easily by using block level scoping.

Let Declarations

Declare let to limit the variable’s scope in only the current code block, for example:

In these two examples, the variables only exist within the loop and are no longer accessible when the loop is complete.

Constant Declarations

In ECMA Script6, you can also us const declaration syntax to define variables. Variables defined by const are considered constants and cannot be changed once set. For this reason, we must initialize this when declaring variables. For example:

 

Template Literals & Multi-line Strings

Template Literals

Template literals act like regular strings delimited by backticks (`) instead of double or single quotes. In ES5, when you need to output a variable in a string, you need to connect it with a plus sign like this:

Luckily, in ES6 we can embed variables directly into this string with a new syntax ${NAME}.

Multi-line Strings

Multi-line Strings in ES6 will make it easy when you want to output multiline strings. Because there’s no special syntax, just delimited by backticks (`) and includes a new line when you want. For example:

Destructuring for Easier Data Access

ES6 adds destructuring for both objects and arrays. Which make it easier to decompse the data to get what you want. In ES5 and earlier, we get a value like below:

In ES6, when you need to get the corresponding value from an object, you can simply assign it to an object literal as in the below example:

In this code, we can use the variable called type/name to get the value we want because the value of node.type is stored in type. Similarly, the value of node.name is stored in name.

We can also get an object like this:

Array destructuring is similar to object destructuring. You just need to replace the object with array literal syntax. Unlike object, destructuring operates on positions within arrays, rather than named properties.

Default Parameters

In ES5 and earlier, we will use the following pattern to create a function with default parameters values:

However, there is a flaw with this approach. When age is 0, we can’t get the age properly because 0 is false. In ES6, you can provide default values for parameters in order to avoid this error. For example:

Rest parameters

The rest parameter is defined by adding three dots (…) before the named parameter, which is used as an array container to receive the remaining parameters.

Please pay attention to be sure that there are two restrictions on rest parameters. The first is that there can be only one rest parameter, and the rest parameter must be last. The other is that rest parameters cannot be used in an object literal setter. For example:

Arrow Functions

The arrow function is one of the most useful parts of ES6. A function is defined with a new syntax that uses an arrow (=>). But compared to traditional JavaScript functions, the arrow function has some different behaviors like below.

Arrow function syntax

Using an arrow (=>) to simplify the traditional function.

No this Binding

One of the most common errors in JavaScript is the binding of this inside the function, because the value of this is likely to change within a single function according to different contexts. So this will point to the wrong object instead of the one you want. See the following example:

In this code, when you to call this.doSomething() in init() will throw an error because this refers to the target object of the event (in this case the document), instead of binding to PageHandler. You can resolve this problem by explicitly binding the object to PageHandler using the bind() method on the function like this:

document.addEventListener(“click”,(function(event)  {

this.doSomething(event.type);

}).bind(this), false);

The arrow function does not have this binding, which means that the value inside the arrow function can only be determined by looking for the scope chain. If an arrow function is within a non-arrow function, this will be the same as the containing function. Otherwise, this points to the global scope. So you can rewrite this code using an arrow function:

JavaScript Classes

The simplest class from in ES6 is the class declaration, which looks similar to classes in other languages. A basic class declaration is like below:

The class makes inheritance easier by using the extends keyword to specify the functions that the class should inherit. You can access the parent class constructor by calling the super() method. Here’s an example to inherit from PersonClass.

Currently, not all browsers are supporting ES6 syntax, we need to use Babel to compile, which means we can write ES6 codes, but Babel helps us compile to ES5.

Of course, there are many other noteworthy ES6 features. If you are interested in, you can read Understanding ECMAScript 6 for further learning.