Tag Archives: ECMASCRIPT6

Introduction to ECMASCRIPT 2015 – ES6

2 Nov

Introduction

ECMASCRIPT 2015 aka ES 6 is the new ECMA standard standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It makes java script lovers happy 🙂 . It adds lot of goodies to java script like classes, arrow functions,block scopes , const etc.
Background

ECMASCRIPT is nothing but the standard. Almost all scripting languages including java script are created using ES (ES is using across this article for ECMASCRIPT) as core.

wiki link for history .

Browser Support

None of the browsers fully support ES 6. EDGE 13 supports 80% of ES 6 features and FF43 supports 72 %. You can check the complete list of browsers which support ES 6 here.

To overcome the browser support issue (only for time being) we can use transpilers to convert the ES6 code to ES5 and use them in your page. I am using babel transpiler in my examples to convert my ES6 code to ES5. There are many transpilers available. Have a look here .
What is new in ES6?

I would like to introduce some new goodies in ES 6 with examples in javascript.

1. Arrow functions

ES6 has arrow functions which has shorter syntax compared to normal function using the => syntax and are anonymous. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript.The synatx is:

// Basic syntax:
(parameters) => { statements }
(parameters) => expression
// equivalent to: => { return expression; }

In the example:

[1,2,3,4].map(x=>console.log(x*x));

Thi will return squares of the given list of integer array. And the result is same as that of

[1, 2, 3, 4].map(function (x) {
return console.log(x * x);
});

The transpiled coud should be looks like this.

2. Constants

we can declare constants using the keyword const .

Eg: const pi=3.14;

3. Template Strings

The beauty of string templates like String.Format() in C# is available in ES6. A tag can be added to create customized strings. Also it is possible to create multi line string without using ‘\n’.

Use back ticks (`) defining template strings. The sample code contains different ways of implementation

// Multi line strings
var multilineString =`In JavaScript this is
not legal.`
console.log(multilineString);

// String interpolation
var name = “Bob”, time = “today”;
console.log(`Hello ${name}, how are you ${time}?`);

//Embeding calculations in string.
var taxPercentage = 10;
var price = 120;
console.log(`The tax is ${price*(taxPercentage/100)}`);

This will repalce the calculated value of price*(taxPercentage/100) in the string and return :

The tax is 12

function calculateTotal(str,amt){
var taxPercentage = 10;
return str+(amt+(amt*(taxPercentage/100)));
}
var amt=120;
var msgWithTax= calculateTotal `The total amount is ${amt}`
console.log(msgWithTax);

This will create a string by calling the calculateTotal function and replaces the tag with calcualted value and the result should be lik :

The total amount is ,132

4. Class

Yes, we can create class using the keyword class in java script. All java script lovers are happy to know js is now object oriented. 🙂

In the example below. I am creating a class with name Bake which has a constructor which accepts a cake type. The class has a member function named getTheCake which gives you the cake you wants.

class Bake {
constructor(cake) {
this.cake = cake;
}
getTheCake() {
console.log(`${this.cake}`);
}
}
//Declaring objects of bake class
var a = new Bake(‘Plum cake’);
a.getTheCake();
//Assigining the variable.
a.cake=’Choclate cake’;
a.getTheCake();

Here the first function call gives you a plum cake and the second gives you a Choclate cake. Enjoy the cake or create you own flavor.

5. inheritance

Since we already got classes there should be inheritance 🙂 , yes inheritance also there in ES6 using the keyword extends

class BakeWithFlavour extends Bake{
constructor(cake,flavour){
super(cake);
this.flavour=flavour;
}
getFlavouredCake(){
console.log(`${this.cake} with ${this.flavour} flavour` );
}
}

Her BakewithFlavour class inherit from the Bake class . And its constructor calling the base constructor using super(cake).

var a = new BakeWithFlavour(‘Plum cake’,’choclate’);
a.getFlavouredCake();

Here the function call getFlavouredCake() will give you a Plum cake flavored with chocolate. Enjoy your piece :).

6. Static methods

Like c# or java we can create static methods in ES6 using the keyword static. And this methods can be called using the class name itself.

class Bake {
static getPlumCake(){
return ‘Plum cake’;
}
}

console.log(Bake.getPlumCake());

7.modules

ES 6 supports modules for component definition which is to support the standards of both common js modules and AMD (Asynchronous Module Definition – The most popular implementation of this standard is RequireJS ) . The synatx includes the key words export and import :

// module.js
export function square(list[]) {
list.map(x=>console.log(x*x));
}

//—— main.js ——
import {square} from ‘Module’;
// or you can use import * from ‘module’ to import all the members in module
var list=[1,2,3,4,5];
square(list);

If we traspile this code using babel we need common.js implementation. Because bable is using the common.js module model to transpile the code.

In examples it contain both ES6 file as well as the transpiled file .I have used the transpiled js files in all. Try to use the actual ES 6 js files depends on your browser and enjoy the brand new java script with ES6 standards.
Refernce

Reference 1

Reference 2

Please find the examples in GitHub here