ECMAScript 6

ECMAScript 6 revision took a long time to finish and was finally accepted on June 17, 2015. ES6 features are slowly becoming part of major browsers and server technologies. It is possible to use transpilers to compile ES6 to ES5 and use the code on environments that do not yet support ES6 completely (we will discuss transpilers in detail later).

ES6 substantially upgrades JavaScript as a language and brings in very exciting syntactical changes and language constructs. Broadly, there are two kinds of fundamental changes in this revision of ECMAScript, which are as follows:

• Improved syntax for existing features and editions to the standard library; for example, classes and promises
• New language features; for example, generators

ES6 allows you to think differently about your code. New syntax changes can let you write code that is cleaner, easier to maintain, and does not require special tricks. The language itself now supports several constructs that required third-party modules earlier. Language changes introduced in ES6 need a serious rethink in the way we have been coding in JavaScript.

A note on the nomenclature-ECMAScript 6, ES6, and ECMAScript 2015 are the same, but used interchangeably.

Browser support for ES6

The majority of the browsers and server frameworks are on their way towards implementing ES6 features. You can check out the what is supported and what is not by clicking http://kangax.github.io/compat-table/es6/.

Though ES6 is not fully supported on all browsers and server frameworks, we can start using almost all features of ES6 with the help of transpilers. Transpilers are source-to-source compilers. ES6 transpilers allow you to write code in ES6 syntax and compile/transform them into equivalent ES5 syntax, which can then be run on browsers that do not support the entire range of ES6 features.

The defacto ES6 transpiler at the moment is Babel. In this book, we will use Babel and write and test our examples.

Babel

Babel supports almost all ES6 features out of the box or with custom plugins. Babel can be used from a wide range of build systems, frameworks, and languages to template engines, and has a good command line and read-eval-print loop (REPL) built in.

To get a good idea about how Babel transpiles ES6 code to its ES5 equivalent form, head over to Babel REPL (http://babeljs.io/repl/).

Babel REPL allows you to quickly test small snippets of ES6. When you open Babel REPL in the browser, you will see some ES6 code defaulted there. On the left pane, remove the code and type in the following text:

    var name = "John", mood = "happy"; 
    console.log(`Hey ${name}, are you feeling ${mood} today?`) 

When you type this and tab out of the left pane, you will see REPL transpiling this ES6 code into something like the following code:

    "use strict"; 
    var name = "John", 
      mood = "happy"; 
    console.log("Hey " + name + ", 
      are you feeling " + mood + " today?"); 

This is the ES5 equivalent of the code we wrote earlier in the left pane. You can see that the resulting code in the right pane is a familiar ES5. As we said, Babel REPL is a good place to try and experiment with various ES6 constructs. However, we need babel to automatically transpile your ES6 code into ES5, and for that, you can include Babel into your existing build systems or frameworks.

Let's begin by installing Babel as a command-line tool. For this, we will assume that you are familiar with node and Node Package Manager (npm). Installing Babel using npm is easy. Let's first create a directory where we will have Babel installed as a module and rest of the source code. On my Mac, the following commands will create a directory called babel_test, initialize the project using npm init, and install Babel command line using npm:

    mkdir babel_test
    cd babel_test && npm init
    npm install --save-dev babel-cli

If you are familiar with npm, you may get tempted to install Babel globally. However, installing Babel as a global module is not generally a good idea. Once you have installed Babel in your project, your package.json file will look something like the following block of code:

    { 
      "name": "babel_test", 
      "version": "1.0.0", 
      "description": "", 
      "main": "index.js", 
      "scripts": { 
        "test": "echo "Error: no test specified" && exit 1" 
      }, 
      "author": "", 
      "license": "ISC", 
      "devDependencies": { 
        "babel-cli": "^6.10.1" 
      } 
    } 

You can see a development dependency created for Babel for version > 6.10.1. You can use Babel to transpile your code by either invoking it from the command line or as part of the build step. For any non-trivial work, you will need the later approach. To invoke Babel as part of the project build step, you can add a build step invoking Babel inside your script tag to your package.json file, for example:

    "scripts": { 
      "build": "babel src -d lib" 
    }, 

When you do npm build, Babel will be invoked on your src directory and the transpiled code will be placed inside lib directory. Alternatively, you can run Babel manually also by writing the following command:

    $ ./node_modules/.bin/babel src -d lib

We will talk about various Babel options and plugins later in the book. This section will equip you to start exploring ES6.