ES6 Features

Published On: 11 July 2019.By kapil goyal.

General

ES6 Features

This is also known as ECMAScript 6 and ECMAScript 2015. ES6 has some new features. This blog introduced these features.

Let & Const

There was the only way to declare a variable by using the “var” in Javascript. The problem with var is it has no scope and can declare the same variable multiple times. Now we have let and const keywords.

Let

Let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.

{ 
     let x = 10; //x is 10
}
//x is undefined

{

let x = 10; //x is 10

}

//x is undefined

var  x = 10; //x is 10
{
     let x = 20; //x is 20
}
//x is 10

var x = 10; //x is 10

{

let x = 20; //x is 20

}

//x is 10

Const

Const allows you to declare a constant variable, a value that shouldn’t change in our code. Constants are similar to let variables, except that the value cannot be changed.

Features of const:

• Scoping: variables are also block level scoped.

• Immutable: The value of a constant variable cannot change.

• Redeclaration: A const variable cannot be redeclared and will give a Syntax Error.

var x = 10; //x is 10
{  
     const x = 20; //x is 20
}
//x is 10

var x = 10; //x is 10

{

const x = 20; //x is 20

}

//x is 10

const x = 10; //x is 10
x = 20; //show error. You cannot change the value of constant.

1 2	const x = 10; //x is 10 x = 20; //show error. You cannot change the value of constant.

const lang = [‘HTML’, ‘JS’, ‘PHP’];
lang = ‘Python’; //show error
lang.push(‘Python’); //lang is [‘HTML’, ‘JS’, ‘PHP’, ‘Python’];

const lang = [‘HTML’, ‘JS’, ‘PHP’];

lang = ‘Python’; //show error

lang.push(‘Python’); //lang is [‘HTML’, ‘JS’, ‘PHP’, ‘Python’];

Arrow functions

Arrow functions allows a short syntax for writing function expressions. It has changed in syntax.

//Old Method 
function customFunc(){
   console.log(‘Welcome in Auriga IT’); 
} 
//New Method 
var customFunc = () =&gt; {
   console.log(‘Welcome in Auriga IT’); 
}

//Old Method

function customFunc(){

console.log(‘Welcome in Auriga IT’);

}

//New Method

var customFunc = () => {

console.log(‘Welcome in Auriga IT’);

}

In the above example, it has two parts.

var customFunc = ()

It is just declaring a variable and assigning a function i.e. the variable actually a function.

=> {}

It is declaring the body part of the function.

//Old Method
var a = function(a, b){ return x * y; }

//New Method
const a = (a, b) =&gt; a * b; //OR
const a = (a, b) =&gt; { return x * y; }

//Old Method

var a = function(a, b){ return x * y; }

//New Method

const a = (a, b) => a * b; //OR

const a = (a, b) => { return x * y; }

Default parameters

Default parameters are parameters that have default value during declaration of functions. It’s value can be changed when calling the function.

let customFunc = (a, b = 20) =&gt; {   
     return a + b;
}
customFunc (10); //10 + 20 = 30

let customFunc = (a, b = 20) => {

return a + b;

}

customFunc (10); //10 + 20 = 30

let customFunc = (a = 20, b) =&gt; {
     return a + b;
}
customFunc (10, 5); //10 + 5 = 15
customFunc (10,); //NaN

let customFunc = (a = 20, b) => {

return a + b;

}

customFunc (10, 5); //10 + 5 = 15

customFunc (10,); //NaN

for of loop

for..of is very similar to for..in with small modification. for..of iterates through the list of elements i.e like Array and returns the elements one by one.

let arr = [50, 20, 60, 10];
for (let val of arr){
     console.log(val);
}
 //Output
 50
 20
 60
 10

let arr = [50, 20, 60, 10];

for (let val of arr){

console.log(val);

}

//Output

let str = ‘ES6’;
 for (let val of str){
     console.log(val);
 }
 //Output
 E
 S
 6

let str = ‘ES6’;

for (let val of str){

console.log(val);

}

//Output

let strArr = [‘JS’, ‘PHP’, ‘Python’];
 for (let str of strArr){
     console.log(str);
 }
 //Output
 JS
 PHP
Python

let strArr = [‘JS’, ‘PHP’, ‘Python’];

for (let str of strArr){

console.log(str);

}

//Output

PHP

Python

Spread attributes

Spread attributes spread the expression. In simple way, it converts a list of elements to an array and vice versa.

let sumEle = (…arr) =&gt; {
     console.log(arr);
     let sum = 0;
     for(let val of arr){
          sum += val;
     }
     console.log(sum);
 }
 sumEle(20,60,10,30);

//Output
 [20,60,10,30]
 120

let sumEle = (…arr) => {

console.log(arr);

let sum = 0;

for(let val of arr){

sum += val;

}

console.log(sum);

}

sumEle(20,60,10,30);

//Output

[20,60,10,30]

120

Maps

Map object holds key-value pairs. It’s similar to an array but we can define our own index. Indexes are unique in maps.

const mapObj = new Map([[‘one’,1],[‘two’,2]]);
 for(let [key, val] of mapObj){
     console.log(Key: ${key} and Value: ${val})
 }
//Output
 Key: one and Value: 1
 Key: two and Value: 2

const mapObj = new Map([[‘one’,1],[‘two’,2]]);

for(let [key, val] of mapObj){

console.log(Key: ${key} and Value: ${val})

}

//Output

Key: one and Value: 1

Key: two and Value: 2

var mapObj = new Map();
 mapObj.set(‘name’, ‘kapil’);
 mapObj.set(‘phone’, 1234567890);
 mapObj.set(‘lang’, [‘JS’, ‘PHP’, ‘HTML’]);
 console.log(mapObj.get('name'));
 console.log(mapObj.get('phone'));
 console.log(mapObj.get('lang'));
 //Output
 kapil
1234567890
 [‘JS’, ‘PHP’, ‘HTML’]

var mapObj = new Map();

mapObj.set(‘name’, ‘kapil’);

mapObj.set(‘phone’, 1234567890);

mapObj.set(‘lang’, [‘JS’, ‘PHP’, ‘HTML’]);

console.log(mapObj.get('name'));

console.log(mapObj.get('phone'));

console.log(mapObj.get('lang'));

//Output

kapil

1234567890

[‘JS’, ‘PHP’, ‘HTML’]

Sets

Set objects are simply collections of values which are used to store the unique values of any type. A value in the Set may only occur once. In order words, if you create a set that has the same element more than once, it is still considered as a single element.

const setObj = new Set([1, 1, 2, 2, 1]);
 for (const val of setObj) {
     console.log(val);
 }
 // Output:
  1
  2

const setObj = new Set([1, 1, 2, 2, 1]);

for (const val of setObj) {

console.log(val);

}

// Output:

var setObj = new Set();
 setObj.add('a');
 setObj.add('b');
 setObj.add('a'); // We are adding duplicate value.
 for (let val of setObj) {
     console.log(val);
 }
 //Output:
 a            
 b

var setObj = new Set();

setObj.add('a');

setObj.add('b');

setObj.add('a'); // We are adding duplicate value.

for (let val of setObj) {

console.log(val);

}

//Output:

Classes

It makes writing classes and inheriting from them.

class shape {
     constructor (id, x, y) {
         this.id = id
         this.move(x, y)
     }
     move (x, y) {
         this.x = x
         this.y = y
     }
 }

class shape {

constructor (id, x, y) {

this.id = id

this.move(x, y)

}

move (x, y) {

this.x = x

this.y = y

}

Static methods

Static keyword use to define static method within the class. It can be call without needing an instantiation of the class.

Class myClass(){
     static staticFun(){
          console.log(‘Static Method’);
     }
 }
 myClass.staticFun();
 //Output
 Static Method

Class myClass(){

static staticFun(){

console.log(‘Static Method’);

}

myClass.staticFun();

//Output

Static Method

Getters and Setters

Setter and Getter allow you to use the properties directly i.e. by using the setter you can set the property and by using the getter yo can get the property.

class People {
     constructor(name) {
         this.name = name;
     }
     get Name() {
         return this.name;
     }
     set Name(name) {
         this.name = name;
     }
 }
 let person = new People("Kapil");
 console.log(person.Name);
 person.Name = "Arun";
 console.log(person.Name);
 //Output
 Kapil
 Arun

class People {

constructor(name) {

this.name = name;

}

get Name() {

return this.name;

}

set Name(name) {

this.name = name;

}

let person = new People("Kapil");

console.log(person.Name);

person.Name = "Arun";

console.log(person.Name);

//Output

Kapil

Arun

That’s all for this blog

Discover More

ES6 Features

ES6 Features

Let & Const

Let

Const

Arrow functions

Default parameters

for of loop

Spread attributes

Maps

Sets

Classes

Static methods

Getters and Setters

Related content

That’s all for this blog