ES6 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 developers conventions and meetups. And why it should be not :JavaScript rules the web and is gaining 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 the top 5 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 we the height variable will be resolved to 0.
ES5 way:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


ES6 way:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


ES6 way:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


ES6 way:

filter_none

edit
close

play_arrow

link
brightness_4
code

var multiline_es6='Geeks
For
Geeks'

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.