ECMAScript 2015 (ES6) – New Features – PART 1

Constant:

We heard many times about Constant variables in Object Oriented Programming like C++, Java etc. now JavaScript also introduces the concept of constant variables in ES6(better late than never). Constant variables cannot change their values as they cannot be reassigned and their scope restricted to the block in which they declared. Also these variables declare using const must be initialized while declaration.

Example: const myVar = 5;

Default Parameters: 

Before ES6, we were setting hard coded values to the variables such as 0 (by default false in JS) or by using logical OR (||) operator which is not the good practice to code. But now we can set the default values of variables inside signatures of functions.

For example:

Now:

var myVar = function (val1 = 50, myColor = 'red', defaultUrl = 'http://www.google.com') 

{ 

    //code block

}

Before:

function myFuntion (x, y) {

x = x || 10;

y = y || 11;

console.log(x + y );

}

Block-Scoped Variables: 

Like “Orange is the new black” a well-known tv-series, In JS “let” is a new “var” which allows to scope the variable into the code blocks. You can differentiate between var and let here. let scope is only there till the scope of the block in which they defined as well as in any contained sub-blocks while scope of a var variable is the entire enclosing function. You can found the best example here.

function varTest() {

var x = 1;

if (true) {

var x = 2; // same variable!

console.log(x); // 2

}

console.log(x); // 2

}

function letTest() {

let x = 1;

if (true) {

let x = 2; // different variable

console.log(x); // 2

}

console.log(x); // 1

}

Block-Scoped Functions:

Earlier developers were bound to follow the IIFE (Immediately invoked function expressions) because of unavailability of global vs local scope proper differentiation but now with the ES6 new feature block scoped functions and variables situation is better now. This also avoids the hoisting situation, though hoisting is still existing but with the better error expression which are helpful for developers.

Example of hoisting in ES5:

(function(){

console.log(a); //undefined

var a = 10;

})();

Example of hoisting in ES6:

{

function foo(){

console.log(a); //reference error, a is not defined

var a = 10;

}

}

Example of block scope functions:

{

function test(a, b){

return a + b;

}

console.log(test(2, 3)); // print

{

function test(a, b){

return a * b;

}

console.log(test(2, 3)); // print 6

};

Advantage of block scoped functions is 1) we don’t need to write complex IIFE syntax and 2) we don’t need to store functions into variables instead we can pass parameters directly into function signature.

Such as: function (p1, p2….) {};

For more reference visit.

Arrow Functions: 

Also known as “fat arrows” because of its shorter syntax for writing function expression i.e. =>. Arrow function also changes the way of writing typical function expressions. If using an expression after an arrow, the return is implicit, so no return is required.

For example:

var myNumber = [1, 2, 3, 4];

Before...

var getOddNum = myNumber.filter(function(number) {

return number % 2;

});

console.log(getOddNum);

Now...

var getOddNum = myNumber.filter(number => number % 2);

console.log(getOddNum);

The major advantage of arrow function is that it changes the binding of “this” value.

In ES5, we have to store parent “this” value into another variable to use them further else they create their own “this” reference.

Example:

function exampleES5() {

this.seconds = 0;

window.setInterval(function() {

this.seconds++;

}.bind(this), 1000);}.bind(this), 1000)

}

var counterA = new exampleES5();

window.setTimeout(function() {

console.log(counterA.seconds);

}, 1200);

After...

lexical scope:

function exampleES6() {

this.seconds = 0;

window.setInterval(() => this.seconds++, 1000);

}

let counterB = new exampleES6();

window.setTimeout(() => console.log(counterB.seconds), 1200);

And while looking for few example I found very easy and best example here.

As I want to write about each and every new feature of ES6, I will continue this series in next parts.