JavaScript ES6: The Next Level

ECMA Script is the language standard. This is the 6^Th version of ECMA script the first version was released in 1997.ECMA script6 is also called “ES6”,” Harmony” and “ES.next”.

ECMA Script6 Compatibility

Kangan has an ES6 compatibility table which lists the ES6 features and browsers which support or don’t support them.

Getting Started with ES6

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, and means.

One of the goals for ES6 is to be a better

·       Language for creating

·       Complex Applications

·       Libraries

·       Code Generators

 

Requirements

·       New features require a concacte demonstration.

·       Keep the language pleasant for casual developers.

·       Preserve the “start small and iteratively prototype” nature of the language.

Goals

·       Complex Application

·       Libraries (possibly including the DOM)shared by those applications

·       Code generators targeting the new edition.

Switch to a testable specification, ideally, a definitional interpreter hosted mostly in ESS. Improve interoperation, adopting de facto standards where possible.keep versioning as simple and linear as possible. Support a statically verifiable,object-capability secure subset.

Overview of ES6 features

·       Block Bindings

·       Arrow Functions

·       Destructured assignment

·       Parameters

·       Iterators and Generators

·       Collections

·       Template strings

·       Promises

Block Bindings

A variable is formally known as binding. For eg in javascript when we declare and initialize variable using keywords like var and const binding occurs.ESC offers some of the best approaches for block bindings with the use of var, let and const.

 Arrow Functions

Arrow function expressions is a syntactically compact alternatives to a regular function expression

Two factors influenced the introduction of arrow functions : the need for shorter functions and the behavior of this keyword.

Shorter functions

[code]

var elements = [

                            ‘Hydrogen’

                            ‘Helium’

                            ‘Lithium’

                            ‘Beryllium’

                             ];

//This will return the array :

                        [8,6,7,9]

      elements.map(function(element)

       {

     return element.length;

       });

 [/code]

Arrow functions used as methods

[code]

    ‘use strict’

     var obj ={

     i : 5 ,

    b: () =>console.log(this.i,this);

    c: function()

        {

   console.log(this.i,this);

        }

     }

  obj.b(); //it prints undefined window {….}

 obj.c();//it will print 5 , object {…..}

 [/code]

Functions Rest Parameters

[code]

  function add(...theArgs)

     {

  return theArgs.reduce((previous,current)=>

     {

  return previous+current;

      });

    }

   console.log(add (2,2,4));

//expected output :8

  console.log(add(2,2,4,1));

//expected output:9

[/code]

Lets look into the details of the different between rest parameters and the arguments object

There are three main differences between rest parameters and the arguments object. The arguments object is not a real array and rest parameters are array instances like sort, map.

 

From arguments to an array

Before rest parameters, “arguments” could be converted to normal array using

[code]

 function  x(a,b)

 {

let normalArray = Array.prototype.slice call (arguments)

let normalArray=[].slice.call(arguments)

let normalArray=Array.from(arguments)

let first =normalArray.shift()

let first = arguments.shift()

Array)

 }

 [/code]

Getter

The get syntax binds an object property

 

Syntax

{get prop() {….}}

{get [expression](){……}}

prop property to bind to the given function

expression starting with ECMAScript 2015,we can use expressions for a computed property 

Performance

we can speedup our java code by placing the assignments outside the loop and thus to make the loop run faster.

For e.g.

[code]

var a;

for(a=0; a<arr.length;a++)

{

This code will access the length property every time the loop is iterated.To make this code run faster we can change the above code like

var a;

var l=arr.length;

for(a=0;a<l;a++)

{

[/code]

This code will access the length property outside the loop and thus the loop run faster

 Difference between a normal function and ES6 function with syntax

Regular Function	ES6 Arrow Function
function wish(who){    return ‘Hello, $ {who}!’ ;   const wish =function(who){    return ‘Hello, $ {who}’ ; }	Const  wish =(who)=>{         return ‘Hello , ${who}!’;          }

 

Commonly used methods like filter and map in ES6

Using Map method

[code]

//definition

Collection.map((currentvalue,index)=>{

//return element for new array

});

//example

const arr=[1,2,3,4];

const newArray =arr.map(i=> i*5);

//return a new array with all value as multiple of 5;

[/code]

 

Using filter method

Works on array and return array for filtered items

[code]

//definition

collection.filter((currentvalue,index)=>{

//filter array on

});

const arr=[1,2,34,5];

const newArray =arr.filter(i=>i%2==0);

//return a new array with value [2,4]

[/code]

 

It makes the JavaScript code easy and interesting to explore more on this kindly visit our website

http://skillbakery.com/courses/javascript-es6-the-next-level.html