ES6 Top features and syntax

ES6 or as it is officially called: ECMAScript2015 is a new JavaScript implementation and is arguably the hottest topic in the JS developer’s conventions and meetups why it should not be: JavaScript rules the web and is gaining a foothold in every other field possible, be it robotics(nodebots), desktop applications(using ion framework), chatbots, etc. So, now let’s get down to pointing out the top features of ES6: 

Default Parameters in ES6: Implementation difference: If we supply 0 from our side as height, it would default to 50 in ES5, but in ES6 the height variable will be resolved to 0. 

ES5 way:

javascript

var newvariable = function(height, name){
    var height = height || 50
    var name = name || "GeeksForGeeks"
}

ES6 way:

javascript

var newvariable = function(height = 50, name = "GeeksForGeeks"){}

Template Literals in ES6: Implementation change:In ES6 we can use a new syntax ${NAME} inside of the back-ticked string instead of breaking the string into several parts, concatenating the variables using ‘+’s to get the entire string. 

ES5 way:

javascript

var first="Geeks";
var second="forGeeks";
var newstring='new string is made up of'+first+second;

ES6 way:

javascript

var first="Geeks";
var second="forGeeks";
var newstring='new string is made up of ${first} ${second}';
// change code but same value

Multi-line Strings in ES6: Another yummy syntactic sugar is a multi-line string. In ES5, we had to join the different parts of the string lying in different line using ‘+’ but in ES6, we can just use back-ticks ‘ ` ‘ to make and use multi-line strings. 

ES5 way:

javascript

var multiline_es5='Geeks\n\t'
+'For\n\t'
+'Geeks.\n\t'

ES6 way:

javascript

var multiline_es6=`Geeks
For
Geeks`

Promises: Promises have been a controversial topic. There were a lot of promise implementations with slightly different syntax. q, bluebird, deferred.js, vow, avow, jquery deferred to name just a few. Others said we don’t need promises and can just use async, generators, callbacks, etc. Gladly, there’s a standard Promise implementation in ES6 now! A promise is a method that eventually produces a value. At any point of time, a promise can have one of the three states:

• Promise is pending: You don’t know what value the Promise is going to return.
• Promise is resolved: The Promise returns a value.
• Promise is rejected: The Promise doesn’t return a value and sends error.

Promises are a new implementation and they help us to evade a callback-hell situation(quite a common problem with js applications) as instead of a callback function that will fire when a condition is met, we are chaining the function. You can also understand the difference in the following way: a callback function situation is like a box in a box in a box where we first open the outermost box, then the middlebox and then the innermost box, while a Promise is like climbing a ladder where every step of the ladder is method chaining to the Promise.

We have a complete list of new methods and features introduced in ES6 JavaScript, to check those please go through this Introduction to ES6 article