ES6 got released in 2009 itself but many developers not aware of its fruitful features! Because when the JavaScript ECMAScript 6 (ES6) released, some browsers are not compatible with it so literally ES6 failed to reach its expected audience as the result, most of its fruitful features remained unfamiliar to some developers. But that’s not the case now, today most of the web browsers completely extending its supports and so much compatible to work with ES6.
On giving the close look of JavaScript ECMAScript 6 (ES6) and its features, today on this article, am planning to take you to the ride on most exciting features of ES6 in a succinct way. I believe that you will possess basic skills of and you be able to apply them in a real project after reading it. And, my personal words for you is, please don’t treat it as a guide or documentation. My goal is just to encourage you to dig deeper and get familiar with ES6.
ES6 brought a lot to the table which changed the way we write Javascript for better. Though there are a lot of changes happened, I consider 3 of them to be the most important additions to the language. I am not saying that the rest of the new features aren’t important but I would rather say these 3 are my personal favorite features.

1) Spread operator

The spread operator is the first wonderful addition that I love, it is denoted by three dots (…), Its used to spread iterables in places where one or more parameters are expected. It can be used in a variety of interesting way. A few examples are below.
i) Merging arrays

const age = [12, 17, 23];
const newAge = [14, 15, 16, ...age];
log(newAge);
// Expected output
// [14, 15, 16, 12, 17, 23]

 
ii)Copying an array without reference

const names = ["Agira", "Vignesh"];
const namesCopy = [...names];
namesCopy.push("Nathan");
console.log(names);
console.log(namesCopy);
// Expected Output
// ["Agira", "Vignesh"]
// ["Agira", "Vignesh", "Nathan"]

 
If we copy directly without using the spread then arrays will still have the reference, resulting both arrays having the newly added member.
iii) Destructuring objects

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x);
console.log(y);
console.log(z);
// Expected Output
// 1
// 2
// { a: 3, b: 4 }

 
When destructuring, each property goes into the respective variables and the rest of the object will be going into the variable where the spread operator is used. Cool right?

2) Default parameters

We all remember the tricks we used to get default parameters in javascript, For example.

function shape(height, width) {
   var height = height || 10;
   var width = width || 10;
   // do something
}

 
It is fine unless someone calls this function with a 0 value, It’ll evaluate to false and the default values will be set which is not intended. ES6 introduces us with default parameters which can be defined in the method signature like below.

function shape(height = 10, width = 10) {
   // something
}
shape();

 
No more dirty hacks are required to achieve this.

Related: Leveraging The Power Of Javascript Console In Development

3) Template Literals And Multi-line Strings

Template literals are interpolations in which how to output variables in strings. In ES5 we had to use the following method.

var firstName = "Bruce";
var lastName = "Wayne";
var string = "I'm the batman,  my real name is" + firstName + " "+ lastName;

 
Luckily in ES6 things have become little easier for us, You can rewrite the same using the below,

const firstName = "Bruce";
const lastName = "Wayne";
const string = `I'm the batman, my real name is ${firstName}  ${lastName}`;

 
In the above code, ${variable} name is the syntax for the template literals, the string will parse the variables and add the value to it. If you check closely you can see that the quotes around the string have changed into a pair of backticks(`), it is the new way to write strings in javascript and it has support for multi-line strings as well. For example,

var dialogue = 'ES6 otherwise known as ECMAScript 2015 has many new features. \n\t'
               + 'Features such as scoped variables, arrow functions and much more. \n\t'
               + 'It also has support to multi-line strings so you don\'t have to struggle \n\t'
               + '              like this.'

 
In ES6 the above becomes like this,

const dialogue = `ES6 otherwise known as ECMAScript 2015 has many new features.
               Features such as scoped variables, arrow functions and much more.
               It also has support to multi-line strings so you don't have to struggle
                                    like above.`

Best To Read: Top 5 JavaScript IDEs In 2018

Sounds like am done with my points, above three are best from my favorite list of ES6, Please write on your other favorite features of ES6 in comment section and let the world know your favorite list too.
Looking for more blogs to read? Then don’t miss out anything from our largest blog portal where you find the blogs from diverse technologies.