What is ES6?

ECMAScript 6 in short, ES6,  is an advanced version of plain old JavaScript which is also known as ES5. ES6 is being continuously updated that you can keep track of here. Core features of ES6 include the following:

  • Block Scoping
  • Destructuring
  • Modules and Classes
  • Collections
  • Proxies
  • Iterators and Generators
  • Arrow functions
  • Parameters and Spread

Read in details about the syntax for each feature in their main article here.

ES6 browser support

A wide variety of browsers support ES6 by now. To go through a complete list of ES6 compatibility, please read this article. However, very few browsers run ES6 out of the box and to solve this issue a concept of transcompiler was introduced i.e. also called a Transpiler. We’ll talk about Transpiler in a while. Meanwhile, its good to know that if we wanted to convert ES6 code into  ES5 or plain JavaScript there are two major ES6-to-ES5 transpilers: traceur – By Google and babel – By the JavaScript community.

A basic example

Let’s take a very basic example of a great feature in ES6 called Arrow functions.

Fat arrow functions

Fat arrow => functions are a shorthand notation for writing functions. Unlike in ES5 where we used to have curly braces for making use of the function keyword like:

//ES5 example
var data = ['Alice Green', 'Paul Piper', 'Louis Banker'];
data.forEach(function(line) {
   console.log(line);
});

However with the syntax => provided by ES6 we can rewrite the above code as:

var nate = {
     name: "Nate",
     guitars: ['Gibson', 'Martin', 'Taylor'],
     printGuitars: function() {
            this.guitars.forEach( (g) => {
                    console.log(this.name + " plays a " + g);
            });
      }
}

Arrows are a great way to clean up your inline functions. It even makes it easier to use higher-order functions in ES5 (JavaScript).

Introduction to TypeScript

TypeScript is a superscript of ES6. Think of it as shown in the below figure:

ts

In addition to the features provided by ES6, TypeScript introduces even more features like the following:

  • annotations
  • imports
  • types
  • classes

TypeScript isn’t a completely new language and is a superset of ES6 as shown above. If you write your code in ES6, its perfectly valid and compatible TypeScript code. We can start working with TypeScript but firstly we need to install it like so:

$npm install -g typescript

Type the above command in your console to install typescript and get started. One thing to note: We don’t have to use TypeScript with Angular 2. If you want to use ES5 you definitely can. But we should use TypeScript because there are some great features in TypeScript that makes development a lot better.

Advertisements