Introduction
ECMASCRIPT 2015 aka ES 6 is the new ECMA standard standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It makes JavaScript lovers happy :). It adds lot of goodies to JavaScript like classes, arrow functions, block scopes, const, etc.
Background
ECMASCRIPT is nothing but the standards. Almost all scripting languages including JavaScript are created 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 suports 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 the 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 a 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 syntax is:
(parameters) => { statements }
(parameters) => expression
In the example:
[1,2,3,4].map(x=>console.log(x*x));
This will return squares of the given list of integer array. And the result is the same as that of:
[1, 2, 3, 4].map(function (x) {
return console.log(x * x);
});
The transpiled code should look 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 string
s. Also, it is possible to create multi line string
without using '\n
'.
Use back ticks (`)
defining template string
s. The sample code contains different ways of implementation:
var multilineString =`In JavaScript this is
not legal.`
console.log(multilineString);
var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);
var taxPercentage = 10;
var price = 120;
console.log(`The tax is ${price*(taxPercentage/100)}`);
This will replace 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 calculated value and the result should be like:
The total amount is ,132
4. Class
Yes, we can create class using the keyword class
in JavaScript. All JavaScript 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 want.
class Bake {
constructor(cake) {
this.cake = cake;
}
getTheCake() {
console.log(`${this.cake}`);
}
}
var a = new Bake('Plum cake');
a.getTheCake();
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 your 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 inherits 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 choclate
. Enjoy your piece :).
6. Static Methods
Like C# or Java, we can create static
methods in ES6 using the keyword static
. And this method 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 syntax includes the keywords export
and import
:
export function square (list[]) {
list.map(x=>console.log(x*x));
}
import {square} from 'Module';
var list=[1,2,3,4,5];
square(list);
If we transpile 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 contains 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 depending on your browser and enjoy the brand new JavaScript with ES6 standards.
References