Architecture & DesignTop Seven Features of ECMAScript 6 (ES 6)

Top Seven Features of ECMAScript 6 (ES 6)

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

By Tatsiana Levdikova

The first edition of ECMAScript was brought to life approximately twenty years ago in 1997, but the first successful edition of it—ECMAScript 3 (ES 3)—was released two years later. ES 3 introduced a number of features that turned into part and parcel of the language, namely regular expressions, new control statements, better string handling, and so forth.

There were no changes made to the official standard for ten years. However, browser vendors created their own custom extensions to this language, and Web developers had to try and support a large number of APIs.

ES 4 could have granted developers a respite, but this version was abandoned given political differences related to the language complexity. The fifth edition (ES 5) was released in a late 2009, and it brought some enhancements to the standard library and added support for new features that emerged after ES 3 was published. Nevertheless, many developers continued to write their code on the ES 3 style.

Things began changing several years later when support of older versions of IE started to be dropped, thus encouraging developers to make use of ES 5 code.

ES 6 (aka ECMAScript 2015 and ES6 Harmony) was finalized in June 2015. This version can boast significant improvements to the language, including features developers have been waiting for years. Let’s take a look at some major new features of ES 6. We’ll look at:

  • Block Scoping
  • Temporal Dead Zone (TDZ)
  • Arrow Functions
  • Parameter Default Values
  • Destructuring in ES 6
  • Enhanced Object Literals
  • Classes

1. Block Scoping in ES6

There were only two types of scope up to ES 5. Block scoping was introduced in ES 6, and the two new ES 6 variable keywords, let and const along with the { and } characters, are used to declare it.

In ES 5, variables are declared via var, and these variables are function-scoped, whereas the situation is a little bit different when it comes to ES 6 where variables, that can be additionally declared by let and const. Such variables are block-scoped.

let is the new var, according to the Babel’s guide to ES 6, and there is only one difference between them: The variable declared by let exists only within the current block, whereas var gets scoped to the current function.

if (true) {
   let oranges= 10;

   alert(oranges); // 10
}

alert(oranges);    // error

Here is the ES 5 code:

if (true) {
   var oranges = 10;

   alert(oranges);
}

const works similarly to let, but variables created by it are immutable; conversely, variables created by let are mutable.

const user = {
   name: "Bill"
};

user.name = "Stan";  // permitted
user = 5;            // error

2. Temporal Dead Zone (TDZ) in ES 6

Variables declared by let/const have TDZ. It means that accessing a let/const variable before it is declared leads to a ReferenceError. There are some reasons why the TDZ semantics were introduced, and the major one is that it is useful in catching programming errors. It does not yield unexpected results (like ES 5 code many do) when a code accidentally accesses uninitialized bindings, but it provides error feedback to developers.

3. Arrow Functions in ES 6

These functions have two advantages. Firstly, they are much shorter than traditional functional expressions. The following functions are equivalent:

var sum = () => 1 + 2                     // ES 6


var sum = function() { return 1 + 2; };   // ES 5

Secondly, their this is picked up from surroundings and developers do not need to use bind()/that = this, anymore.

There are some other things that make the arrow function different from others: it cannot be used as a constructor, although it is a function. One more difference is that arrow functions never get their own arguments object.

4. Parameter Default Values in ES 6

Parameters handling was significantly upgraded in ES 6. ES 6 lets developers specify default values for parameters:

function f(x, y=0) {
   return [x, y];
}

5. Destructuring in ES 6

Destructuring is another valuable feature of ES 6. It represents a convenient way to extract values from data stored in arrays and objects and does not requires intermediate variables.

For example:

let [firstName, lastName] = ["Dan", "Jones"];

alert(firstName);   // Dan
alert(lastName);    // Jones

6. Enhanced Object Literals in ES 6

In ES 6, object literals are extended to make creation and composition of objects simpler by reducing the required amount of typing.

ES 6 Code

function f( x, y ) {
   return { x, y };
}

ES 5 Code

function f(x, y) {
   return { x: x, y: y };
}

7. Classes in ES 6

Developers awaited this feature for years. Nevertheless, many of them opposed its introduction because prototypal inheritance is already available in JavaScript, and it can also provide classical inheritance. Developers can not only create classes, but also extend them.

It is vivid that ES 6 has many interesting features that set it apart from both ES 5 and ES 3. The seventh edition of ECMAScript was released not so long ago. It also has a number of interesting features, but ES 7 is unlikely to be as widely used as ES 6 is in the near future.

About the Author

Tatsiana Levdikova is a Web site design and development expert at EffectiveSoft, a custom software development company. You can reach the author at contact@effectivesoft.com.

*** This article was contributed. © All rights reserved, Developer.com. ***

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories