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 

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

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’];

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 = () => {
   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) => 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) => {   
     return a + b;
}
customFunc (10); //10 + 20 = 30

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 str = ‘ES6’;
 for (let val of str){
     console.log(val);
 }
 //Output
 E
 S
 6

let strArr = [‘JS’, ‘PHP’, ‘Python’];
 for (let str of strArr){
     console.log(str);
 }
 //Output
 JS
 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) => {
     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

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

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

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
     }
 }

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

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