Today, ECMAScript 6 is in the process of being finalized. ECMAScript is the foundation of JavaScript and, hence, exploring the proposed features today also means that we get a sneak peak at how we will be writing JavaScript in the near future! In this article, we’ll explore ten new features, with a significant focus on tools, browsers and transpilers.
A Brief History: ECMA, ECMAScript and JavaScript
JavaScript was originally developed by Brendan Eich of Netscape, and officially released as part of Netscape Navigator 2.0 in 1995. A year later, JavaScript was submitted to ECMA International, a body that facilitates the standardization of information and communication technology and consumer electronics, so that it can be formalized industry-wise. ECMAScript, thus, became the name of the scripting language standardized in ECMA-262.
The ECMAScript standard forms the backbone of many other derived languages, including ActionScript and JScript. Through the years, ECMAScript has gone through four versions, with the discussions today very much revolving around version six, which has also been code-named, ECMAScript Harmony.
Version correspondence
Before we dive into these new features, it’s important to note that the ECMAScript standard forms the foundation of JavaScript. There are numerical differences between each of the JavaScript versions and the corresponding ECMAScript editions. This is to say that JavaScript is compatible with the ECMAScript standard, while providing more features. The table below summarizes the relationship between JavaScript and ECMAScript:
| JavaScript Version | ECMAScript Edition | Year |
| JavaScript 1.1 | ECMAScript edition 1 | 1997 |
| JavaScript 1.5 | ECMAScript edition 3 | 1999 |
| JavaScript 2.0 | ECMAScript Harmony | Work in progress |
ES6 Overview
Goals
JavaScript has come a long way since its humble beginnings nearly twenty years ago. Today, developers are writing thousands of lines of code creating complex JavaScript applications. Before we dive into the detailed features of ES6, you may want to look at the big picture that is defined in the specification drafts, in terms of requirements, goals, means and themes. One of the goals for ES6 is to be a better language for creating:
- complex applications
- libraries
- code generators
Compatibility
The ES6 compatibility table is very useful, as it tells us the ES6 features that are supported in the current browser. It also gives us a handy link to the specifications for each of the features listed. Do note that some of the features’ existence might not mean full compliance with specifications. When working with Chrome, be sure to enable the “Experimental JavaScript” flags.
Features
Now that the big picture is defined, let’s explore how we can implement them. In the following sections, we will discuss ten features of ES6, using various tools so that we can understand ES6 both in theory and practice. Prior knowledge of JavaScript is a pre-requisite, so feel free to check out many resources on JavaScript.
Listed below are the features that we’ll go through with a different tool. Try them out one by one, or jump to the specific feature that you’d like to explore:
- Block scoping with
let[ using Firefox browser ] - Block scoping with
const[ using Chrome browser ] - Classes [ using Traceur ]
- Default function parameters [ using TypeScript ]
- Collections [ using NodeJS ]
- Destructuring [ using Firefox browser ]
- Rest parameters & Spread operator [ using Grunt plugin Traceur ]
- Iterators [ using Firefox browser ]
- Array comprehension [ using Firefox browser ]
- Modules (using ES6 Module Transpiler)
Feature 1 - Block Scoping with let
- Documentation:
let - Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console
JavaScript variables are function-scoped. This means that, even if there are variables declared in a nested block, they are available throughout the function. Let’s review a short example below; we’ll simply use the web console in Firefox or Chrome to run them. What do you think will be the value of jsFuture?
var jsFuture = "es6"; (function () { if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); }()); In the above example, the value of jsFuture in the console.log statement will be “es5″. Crucial to your understanding is the fact that, in JavaScript, variable declarations are hoisted to the top, but variable initializations, on the other hand, are not. Hence, regardless of where the variables are initialized and declared, within the function scope, they will always be hoisted. The snippet below is exactly the same – with comments to illustrate this feature of variable hoisting.
var jsFuture = "es6"; (function () { // var jsFuture = undefined; // variable hoisting if (!jsFuture) { var jsFuture = "es5"; } console.log(jsFuture); // "es5" }()); ES6 tackles this issue with let, which is like var, except for the fact that it is block scoped instead of function scoped. Let’s consider another example with var below. Calling the function es[6]() will give us the value of i = 10. Notice that, even though var i = 0; is declared in the for loop, the scope of var i defaults to global. Hence, when the function es[6]() is executed, the value of i is 10.
var es = []; for (var i = 0; i < 10; i++) { es[i] = function () { console.log("Upcoming edition of ECMAScript is ES" + i); }; } es[6](); // Upcoming edition of ECMAScript is ES10 
Let’s now use let. To code this out, we’ll use Firefox and open up the web console through the menu (Tools > Web developer > Web Console). Creating a block-scoped variable within the for loop, let c = i; made it block scoped.
var es = []; for (var i = 0; i < 10; i++) { let c = i; es[i] = function () { console.log("Upcoming edition of ECMAScript is ES" + c); }; } es[6](); // Upcoming edition of ECMAScript is ES6 
Firefox already supports many upcoming ES6 features. Refer to the compliance table for Firefox to keep updated on which features are supported, and which ones are also compliant with the current specification.
Feature 2 - Block Scoping with const
- Documentation:
const - Tool: Chrome Browser > View > Developer > JavaScript Console
Constant definitions are now possible with const. let and const behave similarly in the sense that both are block scoped, but with const, the values are read-only and cannot be re-declared later on. Let’s review a simple code example in Chrome:
Feature 3 - Classes
- Documentation:
class - Tool: Traceur with Chrome Browser > View > Developer > JavaScript Console
In object-oriented programming languages, a class is a representation of an object. It forms the blueprint, while an object is an instance of a class. With regard to JavaScript, it is a class-less programming language and everything is an object. Traditionally, we’ve used functions and prototypes to implement classes. Let’s explore one common way of implementing class in ES5.
var Language = function(config) { this.name = config.name; this.founder = config.founder; this.year = config.year; }; Language.prototype.summary = function() { return this.name + " was created by " + this.founder + " in " + this.year; }; Next, let’s see how ES6 implements classes with minimal class declaration syntax that can be extremely important to distinguish classes and functions. To code out class using the ES6 syntax, we will use Google’s Traceur, which is a transpiler that compiles ES6 code into ES5. First, let’s create the html file structure within which we will insert the ES6 syntax for classes. In order to compile the Traceur code, we require both traceur.js to compile Traceur to JavaScript, as well as bootstrap.js to bind them all. Finally, Traceur will look for script type="text/traceur" tags to compile the relevant code inside the tags into vanilla JavaScript.
<!DOCTYPE html> <html> <head> <title>ES6 Classes</title> <script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script> <script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script> </head> <body> <script type="text/traceur"> // insert ES6 code </script> </body> </html>
Next, within the script type="text/traceur" tags, let’s use the ES6 syntax to implement the same class that we previously did for Language.
class Language { constructor(name, founder, year) { this.name = name; this.founder = founder; this.year = year; } summary() { return this.name + " was created by " + this.founder + " in " + this.year; } } We can now create an instance of the class Language by opening the HTML file in the Chrome browser as var js = new Language. In the console, we’ll see the prompts for other properties of the language as well!
With such a clear syntax declaration, we can also move on to extend the class to implement a sub-class MetaLanguage that will inherit all the properties from the parent class Language. Inside the constructor function, we will require the function super that will call the constructor of the parent class so that it is able to inherit all of its properties. Lastly, we can also add on extra properties, such as version, as illustrated in the code below. Let’s review the ES6 syntax and run it in the Chrome browser:
class MetaLanguage extends Language { constructor(x, y, z, version) { super(x, y, z); this.version = version; } } 
Traceur is a useful transpiler that allows us to code using the ES6 syntax, while doing the heavy-lifting for us to compile it back to the current JavaScript version. Do try out other ES6 features in Traceur as well!
Feature 4 - Default Function Parameters
- Documentation:
default function parameters - Tool: TypeScript 0.8.3
With default function parameters, we can always have function parameters as an option by setting some defaults. The syntax for this feature in ES6 is extremely intuitive. The default parameters are defined when the functions are defined. Let’s have a look at the ES6 syntax below in a new TypeScript file with an extension of *.ts.
function history(lang = "C", year = 1972) { return lang + " was created around the year " + year; } Next, we will install TypeScript as an npm module and run the file .*ts and compile it to vanilla JavaScript. Here are the installation and then compilation commands in the command line:
$ npm install -g typescript $ npm view typescript version 0.8.3 $ tsc 4-default-params.ts
The command above will create a vanilla JavaScript file, called 4-default-params.js, which can then be called from an HTML file. Here’s the simple HTML file that will call the external JavaScript file that is created by the TypeScript compiler:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6 Default Parameters</title> </head> <body> <script src="4-default-params.js"></script> </body> </html>
Finally, we will open the HTML file in Chrome/Firefox and call the function history() two times, with and without the function parameters. Notice that not passing in any function parameters will fall back to the default parameters:
Do check out other TypeScript features, including class or go through a TypeScript tutorial for more in-depth usage.
Feature 5 - Collections
- Documentation: Sets and Maps
- Tool: NodeJS v0.10.4
ES6 offers new data structures previously not available in JavaScript. Before we jump into exploring two such data structure (Sets and Maps), let’s see how we can run ES6 syntax with NodeJS. Install NodeJS; from here on, we will work in the command line. Firstly, we will check the NodeJS version installed, and then check which options will enable ES6 features with the command node --v8-options | grep harmony.
$ node --version v0.10.4 $ node --v8-options | grep harmony --harmony_typeof (enable harmony semantics for typeof) --harmony_scoping (enable harmony block scoping) --harmony_modules (enable harmony modules (implies block scoping)) --harmony_proxies (enable harmony proxies) --harmony_collections (enable harmony collections (sets, maps, and weak maps)) --harmony (enable all harmony features (except typeof))
Next, start the NodeJS repl and query which properties are available for Set and Maps. We will start the NodeJS repl with node --harmony to enable all ES6 features.
$ node --harmony > Object.getOwnPropertyNames(Set.prototype) [ 'constructor', 'add', 'has', 'delete' ] > Object.getOwnPropertyNames(Map.prototype) [ 'constructor', 'get', 'set', 'has', 'delete' ] > .exit $
Sets
Sets are simple data structures that are similar to arrays, but each value is unique. Let’s create a new file, called 5-sets.js, and insert some code to create, add, delete and query the new set that we will create. Also, note that we will add “Hippo” data twice, but in the set, it will be registered only once!
var engines = new Set(); // create new Set engines.add("Gecko"); // add to Set engines.add("Trident"); engines.add("Webkit"); engines.add("Hippo"); engines.add("Hippo"); // note that Hippo is added twice console.log("Browser engines include Gecko? " + engines.has("Gecko")); // true console.log("Browser engines include Hippo? " + engines.has("Hippo")); // true console.log("Browser engines include Indigo? " + engines.has("Indigo")); // false engines.delete("Hippo"); // delete item console.log("Hippo is deleted. Browser engines include Hippo? " + engines.has("Hippo")); // false Run the file in the node repl with the command node --harmony 5-set.js. Note that, even though “Hippo” was added twice to the set, upon deleting it, the set didn’t include it anymore. This once again illustrates that a set is a data structure that can only contain unique values.
Maps
Maps are quite similar to JavaScript object key-value pairs. Using a unique key, we can retrieve the value. In ES6, the key can be any JavaScript data type and not just strings. That’s the interesting part! Let’s create a new file, called 5-map.js, to try out the create, get and delete features:
var es6 = new Map(); // create new Map es6.set("edition", 6); // key is string es6.set(262, "standard"); // key is number es6.set(undefined, "nah"); // key is undefined var hello = function() {console.log("hello");}; es6.set(hello, "Hello ES6!"); // key is function console.log( "Value of 'edition' exits? " + es6.has("edition") ); // true console.log( "Value of 'year' exits? " + es6.has("years") ); // false console.log( "Value of 262 exits? " + es6.has(262) ); // true console.log( "Value of undefined exits? " + es6.has(undefined) ); // true console.log( "Value of hello() exits? " + es6.has(hello) ); // true es6.delete(undefined); // delete map console.log( "Value of undefined exits? " + es6.has(undefined) ); // false console.log( es6.get(hello) ); // Hello ES6! console.log( "Work is in progress for ES" + es6.get("edition") ); // Work is in progress for ES6 
As shown with the ES6 collections features, NodeJS harmony option already supports others ES6 features such as block scoping, proxies and modules. Do try them out in NodeJS as well!
Feature 6 - Destructuring
- Documentation: Destructuring
- Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console
In programming languages, the term “destructuring” denotes pattern matching. In ES6, we can do some pretty nifty pattern matching in arrays and objects that previously would have taken us more than one step. Let’s explore some of them by coding it out in Firefox web console.
Array destructuring
With array destructing, we can initialize variables at once, or even swap them instead of having the conventional way of creating a var temp; temporary variable.
var [ start, end ] = ["earth", "moon"] // initialize console.log(start + " calling " + end); // earth calling moon [start, end] = [end, start] // variable swapping console.log(start + " calling " + end); // moon calling earth
Destructuring also becomes a useful shorthand when returning multiple values from a function, as we do not need to wrap around an object anymore. Also, to skip certain variables, just leave the array element empty:
function equinox() { return [20, "March", 2013, 11, 02]; } var [date, month, , ,] = equinox(); console.log("This year's equinox was on " + date + month); // This year's equinox was on 20March 
Object destructuring
Due to destructuring, variables can also be initialized from an object that is returned from a function even with deeply nested objects. Also, just like the array patterns, we can skip the ones not needed. Here’s the snippet of code that illustrates just this:
function equinox2() { return { date: 20, month: "March", year: 2013, time: { hour: 11, // nested minute: 2 } }; } var { date: d, month: m, time : { hour: h} } = equinox2(); // h has the value of the nested property while "year" and "minute" are skipped totally console.log("This year's equinox was on " + d + m + " at " + h); // This year's equinox was on 20March at 11 
Feature 7 - Rest Parameters and Spread Operators
- Documentation: Rest parameters & Spread operator
- Tool: Grunt plugin Traceur
Rest parameters
In ES6, rest parameters allows us to easily use a few fixed parameters in a function, along with the rest of the trailing and variable number of parameters. We already use arguments, which is an array-like object that defines the arguments passed to a function, but clearly we cannot use the array function to manipulate these arguments. With a clear syntax in ES6, it also moves the intent of the developer into the syntax level with three dots ... to denote a variable number of arguments.
Let’s try to use rest parameters in the ES6 syntax with gruntjs and its plugin for the traceur transpiler, which we used in the previous section.
-
Install grunt command line utility:
$ npm uninstall -g grunt $ npm install -g grunt-cli
-
Create a file, called
package.json, which will define the various modules needed to run Grunt. Note that this list of dependencies includes the traceur plugin:{ "name": "rest-params", "version": "0.1.0", "devDependencies": { "grunt": "0.4.1", "grunt-traceur": "0.0.1" } } -
Create the
Gruntfile.jswhich will contain just one tasktraceurthat will convert ES6 syntax to today’s JavaScript. With this, we will be able to try out ES6 rest parameters.module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), traceur: { custom: { files:{ 'js/': ['rest-spread.js'] // dest : 1 } } } }); grunt.loadNpmTasks('grunt-traceur'); grunt.registerTask('default', ['traceur']); }; -
Create a simple
index.htmlto call the traceur-compiled JavaScript file,js/rest-spread.js:<!DOCTYPE html> <html> <head> <title>ES6 Rest parameters</title> </head> <body> <script src="js/rest-spread.js"></script> </body> </html>
-
Most importantly, we’ll create the file
rest-spread.js, which will contain the rest parameter syntax:function push(array, ...items) { // defining rest parameters with 3 dot syntax items.forEach(function(item) { array.push(item); console.log( item ); }); } // 1 fixed + 4 variable parameters var planets = []; console.log("Inner planets of our Solar system are: " ); push(planets, "Mercury", "Venus", "Earth", "Mars"); // rest parameters -
Finally, we will run
gruntin the command line, which will, by default, run the traceur task and create the file,js/5-rest-spread.js. Next, just view the fileindex.htmlin the browser console:$ npm install $ grunt ╰─$ grunt Running "traceur:custom" (traceur) task js/ [ 'rest-spread.js' ] Compiling... js/ Compilation successful - js/ Writing... js/ js/rest-spread.js successful. Writing successful - [object Object]
Spread operator
A spread operator is the opposite of rest parameters. When calling a function, we can pass in the fixed argument that is needed along with an array of a variable size with the familiar three dot syntax, to indicate the variable number of arguments.
We will use the same project as the rest parameters above and append in the spread operator code to the file rest-spread.js. In the example below, the function requires six separate arguments. When calling the function, the data is passed as an array with the spread operator. Let’s see how the syntax looks, when calling the function with fixed arguments as well as a variable number of arguments:
-
Append the spread operator code to
rest-spread.js:// Spread operator "...weblink" function createURL (comment, path, protocol, subdomain, domain, tld) { var shoutout = comment + ": " + protocol + "://" + subdomain + "." + domain + "." + tld + "/" + path; console.log( shoutout ); } var weblink = ["hypertext/WWW/TheProject.html", "http", "info", "cern", "ch"], comment = "World's first Website"; createURL(comment, ...weblink ); // spread operator -
Run the traceur compile through the Grunt task in the command line, and view the file,
index.html, in the browser:$ grunt Running "traceur:custom" (traceur) task js/ [ 'rest-spread.js' ] Compiling... js/ Compilation successful - js/ Writing... js/ js/rest-spread.js successful. Writing successful - [object Object] Done, without errors.
If you’re already using GruntJS as a build tool in your current project, it will be easy to integrate it with ES6 plugins. So do try out other GruntJS ES6-related plugins to compile ES6 syntax to current JavaScript.
Feature 8 - Iterators
- Documentation: Iterator
- Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console
JavaScript offers for-in for iteration, but it has some limitations. For example, in an array iteration, the results with a for-in loop will give us the indexes and not the values. Let’s take a look at the code below to illustrate this:
var planets = ["Mercury", "Venus", "Earth", "Mars"]; for (p in planets) { console.log(p); // 0,1,2,3 } var es6 = { edition: 6, committee: "TC39", standard: "ECMA-262" }; for (e in es6) { console.log(e); // edition, committee, standard } 
Let’s try the same concept, but, this time, with for-of with an array, a set and a map:
var planets = ["Mercury", "Venus", "Earth", "Mars"]; for (p of planets) { console.log(p); // Mercury, Venus, Earth, Mars } var engines = Set(["Gecko", "Trident", "Webkit", "Webkit"]); for (var e of engines) { console.log(e); // Set only has unique values, hence Webkit shows only once } var es6 = new Map(); es6.set("edition", 6); es6.set("committee", "TC39"); es6.set("standard", "ECMA-262"); for (var [name, value] of es6) { console.log(name + ": " + value); } 
Feature 9 - Array Comprehension
- Documentation: Array comprehension
- Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console
Array comprehensions give us a shorthand syntax to manipulate each of the array contents in a certain pattern. It is very similar to the map() or filter() methods available in the Array object. Let’s examine how we are using map()
var temperature = [0, 37, 100]; function degToKelvin(deg) { return deg + 273; } temperature.map(degToKelvin); // [273, 310, 373] Let's run through the same feature in Firefox to see the shorthand syntax in ES6 to create arrays with as many as three loops to create possible solutions for the game, Cluedo:
// Array created with 1 loop var temperature = [0, 37, 100]; [t + 273 for (t of temperature)]; // [273, 310, 373] // Array created with 3 loops var suspects = ["Miss Scarlet", "Colonel Mustard"], weapons = ["Candlestick", "Dagger"], rooms = ["Kitchen", "Ballroom"]; [(console.log(s + " with a " + w + " in the " + r)) for (s of suspects) for (w of weapons) for (r of rooms)];
Feature 10 - Modules
- Documentation: Modules, Modules examples, Modules loaders
- Tool: ES6 Module transpiler
In programming languages, modules perform isolated discrete functions and are independent of one another. This helps to not only build reusable components across projects, but also keeps errors isolated to the parts related to the current project. We have been creating modules in JavaScript typically with AMD or CommonJS. Let's create a simple module using the ES6 syntax and ES6 Module transpiler.
-
First, let's create the HTML file,
index.html, that will call the essential JavaScripts. We'll be using RequireJS as an AMD loader; hence, we refer to a CDN copy of the latest RequireJS file. Next, we also add the attribute,data-main, on thescripttag to tell RequireJS to load thejs/init.jsfile.<!DOCTYPE html> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6 Modules</title> </head> <body> <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js" data-main="js/init"></script> </body> </html>
-
Now, we will create the file,
js/init.js, which will just invoke thejs/main.jsfile:require(['main'], function(){ }); -
Create the module,
circle, in the file,in/circle.js, in the ES6 syntax. This module exports two functions:export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; } -
Create the file,
in/main.js, that will import the modulecircleso that we can use the functions of that particular module. Notice theimportsyntax:import { area, circumference } from 'circle'; console.log("Area of the circle: " + area(4) + " meter squared"); console.log("Circumference of the circle: " + circumference(14) + " meters"); -
At this point, the folder structure is shown below. We'll use the ES6 Module transpiler to create ES5 compatible code with two newly created files:
js/circle.jsandjs/main.js.$ tree . |-- in | |-- circle.js | `-- main.js |-- index.html `-- js `-- init.js
-
Install the ES6 Module Transpiler:
$ npm install https://github.com/square/es6-module-transpiler.git $ compile-modules --help
-
Finally, we will transpile these two files. Navigate to the folder,
in, from the command line:$ compile-modules circle.js --type amd --to ../js $ compile-modules main.js --type amd --to ../js $ cd .. $ tree . |-- in | |-- circle.js | `-- main.js |-- index.html `-- js |-- circle.js |-- init.js `-- main.js
-
Do look at the transpiled code in the files
js/circle.jsandjs/main.js. We will now open up the file,index.html, in the browser to see modules in action! We will need to use a web server to run this file. I'm using the Python SimpleHTTPServer. Navigate to the command line in the root of the file,index.html:$ python -m SimpleHTTPServer 8000
Resources
Many of our web development community members have openly shared about ES6 and what's coming up. I highly recommend going through their blog categories related to ES6:
And, for some further reading:
- ECMAScript 6 support in Mozilla
- Draft specification for ES.next
- The Future of JavaScript, a video by Dave Herman
- ECMAScript 6 - The Refined Parts (video and slides) by Kit Cambridge
- Latest Tweets on ES mailing list
- es6 - my fav parts
- ES6 has proper tail calls
- Power of Getters
- ECMAScript 6
- ES6 deep Dive by Dave Herman
Play with ES6 Today
There you have it: ten features of ES6 with tools that allow us to code with the new syntax today. I hope this has made you more excited about what's to come! Please note that, since the standardization work is in progress, the syntax, features and compliances might change. Nonetheless, it's definitely worth the effort to dig in sooner than later.
Entradas
