Tutorialspoint.dev

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:

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

ES6 way:

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:

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

ES6 way:

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:



var multiline_es5='Geeks '
+'For '
+'Geeks. '

ES6 way:

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.



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter