Exploring ECMAScript 6 with Chrome — Part 1

2 min readDec 21, 2015

JavaScript has come a long way these last few years. The current standard (ECMAScript 5) can arguably be thought of as the Language of the Internet.

The next standard is called ECMAScript 6 and I’m going to start exploring it here.

One important thing to notice is that due to the sheer number of compilers, browsers (both desktop and mobile) and libraries that are planning to support ECMAScript 6, it would be unreasonable to expect that they would all launch full support in one go.

An incremental approach has therefore been chosen. Shim libraries are popular in allowing usage of a feature not yet implemented.

I discovered this web page which brilliantly lists the various levels of support in everything from NodeJS to Firefox and Safari on iOS:

https://kangax.github.io/compat-table/es6/

Now let’s analyze my own browser. I use the latest Chrome on OS X which as of writing (21st Dec 2015) is version 47.

Now.. what are the core features of ES6?

Let’s identify the main selling points of ES6 and see how far Chrome has come with those.

The first one that comes to mind are Classes. ES5 has a somewhat awkward way of achieving this.

According to the results on the left, Chrome is not yet there — at all

Modules next — a much hyped feature of ES6. Again, not yet.

Additions to built-ins e.g. Array, Map, Set, Promise and so on — Things are looking better here. Almost complete support. Not so much with Proxy and Reflect.

I find Reflect to be quite interesting — it’s a new built-in object that provides a way to intercept JavaScript operations, and provide cleaner reflection functionality.

You’ll find that the Reflect object behaves similarly to Object by offering methods like .has(target, name), .apply(target, receiver, args), .defineProperty(obj, name, desc).

However, where Object methods will just throw an exception, Reflect actually returns useful information. Take the following use of Object.defineProperty:

try {
  Object.defineProperty(obj, name, desc);
  // Success
} catch(e) {
  // Oops!
}

Can be replaced with:

if(Reflect.defineProperty(obj, name, desc)) {
  // Success
} else {
  // Oops!
}

That’s it for now. I’ll continue analyzing ES6 features and Chrome compatibilty in the next part.

References include http://www.ecma-international.org/ecma-262/6.0 (the official ES6 specification), https://kangax.github.io/compat-table/es6/ (An excellent ES6 compatibility site), http://h3manth.com/new/blog/2015/es6-reflect-api/ (Reflect API).

Exploring ECMAScript 6 with Chrome — Part 1

Written by Torbjørn Kristoffersen