« Back to home

Summary of ECMAScript 6 Major Features

ECMAScript 6, the new Javascript standard, is going to be released by the end of 2014. Dr. Axel Rauschmayer gave a presentation about its features at the O'Reilly Fluent Conference 2013 in San Francisco. The presentation slides can be found here. Here is my summary of what I think are the most major features of ES6 that benefit the majority of Javascript developers:

Blocked-scope variables

let is going to be included in ES6 which allows blocked-scope variable declaration. So no more "declaring your variables at the top of the function".

Lexical this

ES6 introduces "arrow function", which is a borrowed concept from CoffeeScript. Arrow functions don't have their owned this defined at the point they're called, so this refers to the context in which the functions are defined. For example:

function UiComponent {
  var button = document.getElementById(!#myButton!);
  button.addEventListener(!click!, => () {
    console.log(this);
  });
}

this in this case refers to the UIComponent object where the event handler is defined, not the global window object or any arbitrary object that calls the event handler.

Parameter default values

Setting default values for function parameters is now possible:

function(x, y = 3) { ... }

Defining prototypal inheritance in object literal

__proto__ is being included in ES6, making it possible to define prototypal inheritance in object literal:

var obj = {
  __proto__: someOtherObj,
  method: function() { ... }
}

So no more having to use the long form Object.create() as well as the weird confusing constructor and new pattern.

Introduction of Symbols

symbol is a new kind of primitive value, and each symbol is unique. This allows enum-style values, which have been a major deficiency in the language:

let red = Symbol();
let green = Symbol();
let blue = Symbol();
function handleColor(color) {
  switch (color) {
    case red:
      ...
    case green:
      ...
    case blue:
      ...
  }
} 

Given their uniqueness, symbols can be used as identifiers, such as object property keys:

let specialMethod = Symbol();
let obj = {
  [specialMethod]: function (arg) {
    ...
  }
};
obj[specialMethod](123);

This guarantees no name clashes among object properties that are symbols as well as enables computed property name.

Introduction of Classes

I'm not sure whether it's a good thing to include classes in the Javascript standard, since Javascript is not a "classical" language. But in ES6, it's now possible to do this:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return !(!+this.x+!, !+this.y+!)!;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // same as super.constructor(x, y)
    this.color = color;
  }
  toString() {
    return this.color+! !+super();
  }
}

This seems to me like Javascript is going back to the conventional classical object oriented way of doing things. Classes hide the language's prototypal core, which makes it more confusing for beginners. It's just my opinion, of course the ECMA committee has a good reason to do so.

Modules

This is to me the biggest improvement of the language. ES6 now supports exporting and importing modules across different files. Once the standard is implemented, it's possible to write modular Javascript code without having to use external libraries.

Multiple-line Strings

No need to say more, a major pain is relieved:

var str = raw"This is a text
                    with multiple lines.
                    Escapes are not interpreted,
                    \n is not a newline."; 

Above is my personal take on what's going to be the most major features in ES6 from a developer's point of view. ES6 is still in draft phase, and won't be completed until late 2014 according to the timeline. Its specification can and will change, but the preliminary features are very much worth looking forward to. For a complete list of new features, please refer to Dr. Rauschmayer's presentation.

Comments

comments powered by Disqus