ECMA Script 2015 / ES6

It is standard specification on which the Javascript is built.
ES latest version is ECMA Script 2018.
Previous versions are ECMA Script 2017,2016,2015 and in each version some features will be added.
In this tutorial we will discuss ECMA Script 2015 version and features added to it.
Below is the browser support for ECMA Script 2015(ES6)/Javascript.

In this tutorial we will discuss ECMA Script 2015 version and features added to it.

• JavaScript let
• JavaScript const
• JavaScript Arrow Functions
• JavaScript Classes
• Default parameter values
• Rest operator
• Spread Operator
• for of loop 

Lets Discuss them

• JavaScript LET :

"let" keyword allows you to declare a variable whose scope is with in the block in which it has declared.

Example:

var x = 2;

// Here x is 2{

  let x = 3;

  // Here x is 3}

// Here x is 2

Here value 3 for x is within that block where as x variable is treated separately and its remains 3 irrespective of inner block

• JavaScript CONST :

"Const" keyword is used to declare a constant variable meaning whose value does not change and its scope is similar to "let" keyword.

Example:

var pi = 3.1414;

// Here pi is 314{

  const pi = 3.14;

  // Here pi is 3.14}

// Here pi is 3.1414

NOTE:

• let  and const declarations are not Hoisted where as var declarations are hoisted 

• Also  We cannot have two declarations with let key word in the same scope where as with var keyword its perfectly fine.

• var x; is fine but const x is not fine because we have to assign some value to const keyword always.

• JavaScript Arrow Functions

It Allows you to write functions with shorter syntax.

You don't need the function keyword, the return keyword, and the curly brackets.

Example:

// ES5var x = function(x, y) {

   return x * y;

}

// ES6const x = (x, y) => x * y;

Arrow functions are not hoisted.They must be defined before they are used.

to understand above sentence lets discuss

Function Expressions:

Example:

var fnX = function() {

//some logic

};

Function Declarations:

Example:

function fnX() {

//some logic

}

Hoisting:

Hoisting is a phenomenon in JavaScript where you can access variables and function declarations before they are declared.

and

a feature of JavaScript that affects how and where variables are declared.

Hoisting with variables:

CASE1:

<p id="demo"></p>

<script>

//accessed values by interpreter before declaration

document.getElementById("demo").innerHTML =a +" "+b+ " "+ c; // output :undefined undefined undefined

//declaration after variables are assigned/read in inner html

    var a = 10;

    var b = 20;

    var c = 30;

</script>

Above case works perfectly fine javascript because first compiler pulls all the variable declarations not initialization to the top while compilation and then interpreter uses them respectively.

//only declarations are pulled to the top of the code by compiler but not the value initialisations as below when the variables are used before declaration

var a;

var b;

var c;

// then accessed by interpreter before initialization and then initialized respective values hence //the output is undefined

document.getElementById("demo").innerHTML =a +" "+b+ " "+ c; // output :undefined undefined undefined

CASE2:

<p id="demo"></p>

<script>

    var a = 10;

    var b = 20;

    var c = 30;

document.getElementById("demo").innerHTML =a +" "+b+ " "+ c; // output: 10 20 30

</script> 

Above case works perfectly fine javascript because first compiler declares all the variables not initialization while compilation and then interpreter assigns them first and uses them respectively as they declared and initialized before using them.

Hoisting with Function declarations: WORKS!!!

Example:

fnX();

function fnX() {

//some logic

}

Reason is Simple - Declarations moved to top when compiling as explained above and then called by Interpreter

After compiling Code looks like below 

function fnX() {

//some logic

}

fnX();

Hoisting with Function Expressions: NOT WORKS!!!

Example:

fnX();

var fnX = function {

//some logic

}

Reason is Simple - Declarations moved to top when compiling as explained above and then called by Interpreter

var fnX; // just declaration is done while compiling but not the functions itself so it does not whether its a function or what type of variable it is and Value= undefined

fnX(); // throws function not defined as it is not defined

Best Practice:

•     Using const is safer than using var, because a function expression is always constant value 
• You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them

JavaScript Classes :

• ES6 introduced Classes concept and classes are nothing but special functions.

Ex:

class User{}

let u = new User();

console.log(typeof  User); // output: function

Classes follow strict mode and does not support Hoisting

Example:

let u = new User();// Error User is not constructor

class User{}

• Adding a Method to a class is nothing but adding a function to its  prototype of parent function.

Ex:

class User{

AddUser(){};

}

let u = new User();

console.log(u.greet === User.protoype.AddUser); // output: true

• In ES6, class body can contain only methods but not properties.

         there are three types of  methods which we can add in class body.

Ex: class User{ // this whole space is called class body }

class User{

constructor(uname){ // constructor method

    this.name =uname;

console.log("constructor" + this.name);

}

static staticMethod(){ // static methods

  console.log("static method");

}

AddUser(){ // prototype methods

console.log("prototype method")

};

}

let u = new User("ram");// output: constructor ram "here constructor is called when we create object"

u.AddUser() // output: prototype method

User.staticMethod() // output: static method

Classes can be inherited.

Ex:

class User{

construtor(uname){ // constructor method

    this.name =uname;

console.log("parent constructor" + this.name);

}

AddUser(){ // prototype methods

}

class Admin{

     constructor(name){

      super(name); // this is required and mandatory as it calls parent class constructor and sets up the parent with required fields and then it starts executing the child class

      console.log("Admin constructor");

    }

getUser(){

     super.AddUser(); // super is also used to access parent class methods

}

}

let admin = new Admin("ram"); // output: parent constructor ram  Admin constructor

5. 

Default parameter values:

• In ES2015 default parameter value is undefined if not passed to a function while calling.

let defaultValue = function(value){

consol.log(value);

}

defaultValue(); // output: undefined

• But in ES6, we can set default value as below if not passed while calling the function.

 let defaultValue = function(value=30) {

consol.log(value);

}

defaultValue(); // output: 30

defaultValue(20); // output: 20

Rest operator:

in ES6, The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

i.e. it takes individual elements and converts them into an array.

In ES5, arguments operator was used.

synatx :

function sum(...user_deined_valraible_name){// it contains all the arguments passed to function as an Array. i.e. [1,2,3]

};

sum(1,2,3);

Note:

• Rest operator is defined in the function definition but not while calling the function where as spread operator is defined while calling the function

There are three main differences between rest parameters and the argument object:

·         rest parameters are only the ones that haven't been given a separate name (i.e. formally defined in function expression), while the arguments object contains all arguments passed to the function;

function f(a, b, ...theArgs) { // theArgs is user defined name and it contains all the arguments

  // ...

}

·         the arguments object is not a real array, while rest parameters are Array instances, meaning methods like sort, map, forEach or pop can be applied on it directly;

Ex: function frest(a,b,c,...args) {

  let normalArray = args

  let first = normalArray.shift() // OK, gives the first argument -10

}

frest(10,20.30);

 function farguments(a,b,c,...args) {

  let normalArray = args

  let first = normalArray.shift() // ERROR (arguments is not a normal array)

}

farguments(10,20.30);

·         the arguments object has additional functionality specific to itself (like the callee property).

Spread Operator :

It is used when we have to take zero or more elements i.e an array and convert it into individual elements.

function printNumbers(x,y,z){

console.log(numbers)// output: [1,2,3]

}

const num = [1,2,3];

printNumbers(...numbers);// array is converted into 3 individual elements 

for of loop :

Used to iterate over elements directly with out using index which is used in "for in" loop.

const numbers = [1,2,3];

for(let num of numbers){

console.log(num)// output: 1,2,3

}

const literals = "RAM";

for(let lit of literals){

console.log(lit)// output: R,A,M

}