Published on

# Some ES6 features example compare to ES5

Authors
• Name

Then you can think about ES7, which is a modernized version of ES6 -actually known as ECMAScript 2016. But today we will learn about ES6 (ECMAScript 2015).

## Getting Started

1. const and let keywords
2. Template String/Literals
3. Default Parameter
4. Arrow Function
5. Destructuring Array And Object

## const and let keywords

As we are already familiar with javascript, so surely var is also familiar to define variables. ES6 has an addition to use const and let to define variables with a different perspective. Here const stands for constant. if you define a variable (const v), then it will not changeable. let use to define as block scope which is blocked by (). Besides var is also available in es6, let's see. Confused ?? no worries! going to be more clear by examples.

### var

    var x = 10
var x = 20  // var is able to re-Decrelare
console.log(x) //output : 20

var a = 10
{
//defined a block scope to re-declare
var a = 20
}
console.log(a) //output 20


Here var is changing the value when is re-declared in globally & block scope

### let

    let x = 10
let x = 20  // error
console.log(x) //output : let is not able to re-Decrelare

let z = 10
z = 20
console.log(z) //output:  20 {its updated}

let b = 10
{
let b = 20
}
console.log(b) //output 10


Here let is not able to re-declare in the same scope but it can be updated in the same scope. Also, let is not changing the value when is re-declared in block scope.

### const

    const x = 10
x = 20
console.log(x)  // error ' "x" is read-only'

const b = 10
{
const b = 20
}
console.log(b) //output 10


Here const is not able to re-declare/update.

but const is able to re-declare in block-scope. but not able to update.

## How Template Literals makes life easy.

Template literature makes the way easy to write large strings with multiple lines as well. Besides, it's easy to use variables inside that string.

In es5 or back, we have used this.

    let myName = 'Md Rathik';
let myRole = 'Software Developer';
console.log("i am "+myName+","+" Working as a "+myRole+".");
//output : i am Md Rathik, Working as a Software Developer.
//For Multiline string we had to use
console.log("Welcome! \nMy Name is "+myName+"\nI am a "+myRole);
/* Welcome!
my name is Md Rathik
i am a Software Developer */


Now we can make it easy by ES6.

Just use ‘’ backticks, just following the example below.

    let Name = 'Md Rathik';
let Role = 'Software Developer';
console.log(I am ${Name}, Working as a${Role}.);
//output : i am Md Rathik, Working as a Software Developer.

console.log(Welcome!
my name is ${Name} i am a${Role});

//Output
/* Welcome!
my name is Md Rathik
i am a Software Developer */


## Default parameters

Default parameters In es6 now, you can use default parameters; in this case, if you call the function without any parameters, the process automatically takes the default value.

    function es6add (firstNum, lastNum=3){ //output : Here you are able to add a default parameter
return firstNum+lastNum;
}


## Arrow Function

Arrow function makes the code more readable and don't need to use return if its in one line.

Let's see the es5 example function first

    function sum(A,B){
return A+B;
}
console.log(sum(2,4));
//output : 6


Here you go for the es6 example.

    let sumByArrowFunction = (a,b)=>a+b;
console.log(sumByArrowFunction(4,10))
//output : 14


## Destructuring Array And Object

In javascript, we may have complex arrays and objects & for breaking down the complex things in an easy way. In a simple way, I can say, it's about to unpack something.

Let's see the example to be more clear about destructing array.

    let person , age;
let array = ['Md Rathik',26];
[person,age]=array
console.log(person,age);
output : Md Rathik 26


In that code above we have two variables person & age. Also, have an array. Now we are setting array members into that two variables.

Same as we can Destructure the object as well.

    //Destructuring an object