ES6 features

Posted By :Vikrant Kumar |27th April 2022

 

 

What is ES6 ? 

ECMAScript 2015 commonly knowns as ES6 or ES2015 released on June 2015. ES5 was released on December 2009. It takes almost 6 years for the next version of ECMAScript to be released. So, there are many exciting features in ES6.

 

Best 10 ES6 features for a busy javascript developer.

1. Template Literals

2. Multi line strings

3. Default parameters

4. Destructuring

5. Arrow functions

6. Enhanced Object Literals

7. Promises

8. Let and Const

9. Spread Oprator

10. Export and Import modules

 

. . . . . . . . . . . .

1. Template Literals

In ES6, we can use a new systax ${Parameter} inside of the back-ticked string.

var name = `Your name is ${firstName} ${lastName}.`

In ES5, we have to break string like below.

var name = 'Your name is '+ firstName + ' ' + lastName + '.'}.`

 

 

2. Multi line strings

In ES6, It is very simple to write a string in multiple lines. Just use back-ticks.

let paragraph = ` Lorem ipsum is simply dummy text of the

                          printing and typesetting industry.

                          Lorem Ipsum has been the industry's

                          standard dummy text ever since the 1500s. `

 In ES5, we had to use below approach.

let paragraph = ' Lorem ipsum is simply dummy text of the \n '

                         + ' printing and typesetting industry. \n '

                         + ' Lorem Ipsum has been the industry's \n '

                         + ' standard dummy text ever since the 1500s. \n '

 

 

3. Default Parameters

In ES6, we can put the default values right in the signature of the function.

var calculateArea = function(height = 50, width = 80){

            // write logic 

            . . . .

}

 

 

4. Destructuring

The destructuring assignment syntax is a Javascript expression that makes it possible to unpack values from arrays, or properties from objects, 

into distinct variable.

var name = {firstName : 'John', lastName : 'Doe'};

var {firstName, lastName} = name ;

console.log(firstName); // John

console.log(lastName); // Doe

 

In ES5, we had to use below approach

var name = {firstName : 'John', lastName : 'Doe'};

var firstName = name.firstName ;

var lastName = name.lastName ;

console.log(firstName); // John

console.log(lastName); // Doe

 

 

5. Arrow Functions

The Fat arrows are amazing because they would make this behave properly , i.e., this will have the same value as in the context of the function, It won't mutate.

$('.btn').click( (event) => {

         this.doSomething();

});

 

In ES5 , we had to use _this = this or .bind(this).

var _this = this;

$('.btn').click( function(event) {

         _this.doSomething();

});

 

 

 

6. Enhanced Object Literals

Object literals make it easy to quickly create objects with properties inside the curly braces.

function getLaptop(brand, model, year){

    return {

             brand,

             model,

             year

           };

};

getLaptop('Dell' , 'Latitude', '2022');

 

In ES5, we had to use below syntax

 

function getLaptop(brand, model, year){

    return {

             brand : brand,

             model : model,

             year : year

           };

};

getLaptop('Dell' , 'Latitude', '2022');

 

 

 

7. Promises

Promises are used for asynchronous execution. In ES6, we can use promise with arrow function shown below.

var myPromise = new Promise( (resolve, reject) => {

setTimeout( ()=>{

           resolve('foo');

}, 300);

});

 

myPromise

.then( value=> {return value + ' and bar';})

.then( value => {return value + 'and bar again';})

 

In ES5, we need to use setTimeOut ( ).

setTimeout ( funtion (){

    console.log(' Yayy!');

});

 

 

 

8. Let and Const

let is a new var which allows to scope the variable to the block. So, the main diffrence between let and var is, var is scoped to the nearest

function block and let is scoped to the nearest enclosing block, which can be smaller than a function block. 

 

In ES6,

function calculateAmount (boolVal) {

         let amount = 0;

         if(boolVal) {

                     let amount = 1; //scope of this amount ends with nest closing breacket

         }

         return amount;

}

console.log(calculateAmount(true)); // output : 0

 

In ES5,

function calculateAmount (boolVal) {

         var amount = 0;

         if(boolVal) {

                     var amount = 1;

         }

         return amount;

}

console.log(calculateAmount(true)); // output : 1

 

 

 

9. Spread Oprator

Spread systax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or

elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value paires (for objects literals) are expected.

let numbers = [0,1,2,3];

let newNumber = 4;

numbers = [...numbers, newNumber];

console.log(numbers); // [0,1,2,3,4]

 

to clone an object

let obj = {

name : 'John Doe',

age : 24,

designation : ' Assistant Consultant-Development '

}

let objClone = {...obj} 

 

 

 

10. Export and Import modules

In ES6, there are modules with import and export operands.

export var userId = 10;

export function getName (name){

          . . . 

};

 

we can import userId variable and getName method using import statement.

import {userId , getName} from 'module';

console.log(userId);   // 10

 

 

There are other many ES6 features, you can find all them and do practice.


About Author

Vikrant Kumar

Vikrant is a skilled and knowledgeable back-end developer with extensive experience in the industry. He is proficient in various programming languages, such as NodeJS, ExpressJS, MongoDB, React, Angular, and JavaScript. Vikrant has worked on several challenging projects, including Konfer, and has a deep understanding of development principles. He is committed to expanding his knowledge of new technologies and constantly improving his skills to deliver exceptional software products.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us