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
