Things to keep in mind while Moving from ES3/ES5 to ES6 JavaScript.

ES5 was officially announced in 2009 and being settled as a standard of JavaScript for modern browsers such as Firefox, Chrome, Opera, Safari, and many others, with the release of ES6 this addition was renamed as ES 2015 to reflect the year of release but undoubtedly ES6 is all armed up with the modest set of API’s added new to the language and API helpers for various data types, including a whole new approach both syntactically and stylistically.


Let Declarations :

Instead of using var as we used to declare variables in ES5 before. Keeping in mind that the declared variables are attached to the enclosing function scope. Here in ES6 we use let to define variables both global and top level variables, variables declared with let have blocked scope.

Functioned scope declaration of var :

var a = 2; // here a is 2
( ()=> {
// a is undefined
var a = 5;
// a is 5
});
// here a will contain 2 not 5.

Blocked scope declaration of let :

// a is undeclared here
{
let a = 2;
// a is 2 here
}
// a is again undeclared here

So according to the newer ES6 syntax variable can only be declared inside Blocked Scope and undeclared outside the block, so always try to declare and initialize all your variables at the beginning of your scope.


Arrow functions :

Introducing a short and a nice looking syntax, which makes the code look a lot attractive. Nearly all literatures immediately adopted these arrow functions as their new way of declaration function.

The declaration of arrow function is consists of it’s parameters (…) followed by => marker, and then comes the function’s body. You can exclude the block {…} if there is only one expression, otherwise you’ll need to put all the statements inside body enclosed by {…}

arrow function-syntax :

function foo(x, y) {            //ES5 syntax
return x + y;
}
// versus
let foo = (x, y) => x+y;       // ES6 nicer looking syntax

for..of Loops :

ES6 introduces a modified for loop as for..of loop which can loop over those values which iterator produces. The value must be iterable, on which you want to loop over. An iterable is then used by the loop.

for..of loop-syntax :

let a = [“a”,”b”,”c”,”d”,”e”];

for(let idx in a) {

console.log( idx );

}
// it will give 0 1 2 3 4

for(var val of a){ 
   console.log( val );
     }
// and this will give "a" "b" "c" "d" "e"

As you can see, for..in loops over the keys/indexes in the a array, while for..of loops over the values in a.


Generators :

ES6 introduces an exotic function called generator, where all the conventional functions run without any interruption till the completion process this is a function which can pause itself during execution, and can be resumed on demand irrelevant of the guarantee that the function will run till completion or not.

Moreover when you pause or resume the g-function during execution the generator function returns a value due to two way passage. Actually the code which is responsible sends a value back in.

generator-syntax :

function *foo() { // ..
}

The position of the * is not functionally relevant, it’s stylistically different. You can choose what ever suits you from the below syntax styles.

function *foo() { .. } 
function* foo() { .. }
function * foo() { .. }
function*foo() {..}

Generators have a keyword yield used inside the g-function to signal the pause. you can put yield where ever you want but inside the g-function, and during loop it will be the repeated pause point.

function *foo() {
 var x = 10;
var y = 20;
 yield; 
var z = x+y;
}

This *foo() generator operates the first two lines and then yield will pause the generator, and when you will resume it the last line of code will run. Besides that yield can appear as many time as you want and this comes handy while working on big projects to get the return value correctly and then move on.


Classes :

There was a concept in ES5 javascript called Prototypes and prototypal inheritance, which gave tough time to developers as they were very difficult to get hands on, specially for those who migrated from another language.

Now ES6 introduces an alternate to prototypes which is class. The class keyword identifies a block where the contents define the members of the class.

class Shape {
   constructor( color ) {
   this.color = color;
    }
getColor() {
    return this.color;
   }
}

Classes can have a constructor function which identifies the signature of that Shape class, as well as its body contents. Besides that classes may have the following encapsulation:

  1. a constructor function
  2. additional operations extending the prototype
  3. reference to the parent prototype.

Classes API also export extends and super keywords for delegation link between two functions and prototypal inheritance respectively.

class container extends Shape { 
   constructor(a, b, c) {
    super( a, b );
    this.z = c; 
   }
}

The super keyword automatically refers to the parent constructor, super is not limited to class declarations. It also works in object literals. and super also solves tricky issues with relative references in the Prototype chain.


Promises :

As javascript continues to grow the try to achieve full excellence in asynchronous programming because it’s the main concern because callbacks are not fully sufficient and totally fall down when there more traffic and lesser callbacks being handled.

ES6 handles these shortcomings of callbacks by adding Promises. Which completes a potentially async task.

To construct a Promise instance, use the Promise(..) constructor:

var p = new Promise( function(resolve, reject) { // ..
});

The two parameters provided to the Promise constructor are functions, and are generally named resolve and reject, respectively. They are used as:

  • If you call reject, the promise is rejected, and if any value is passed to reject function, it is set as the reason for rejection.
  • If you call resolve with no value, or any non-Promise value, the promise is fulfilled.