Understanding EcmaScript : ES5 vs ES6 — II

Anis Alam
4 min readJan 28, 2021

--

Read The First part here :

ES6 :

Javascript ES6

The Ecmascript 2015 is also known popularly as ES6 . ES6 introduced below key features :

Promises :
One of the major and most loved feature of ES6 was `Promise`.
Promise as the word suggests is an object that represents something that will be available in the future. It solved a major problem developers used to face in the earlier versions of Javascript i.e. callback hell .

callback hell ( source : google image)

Lots of nested callback functions used to be a headache (and error prone) when you needed to make some changes, also the readability of the code was compromised ( it was difficult to identify which callback is getting ended where).
Promises helped solving this problem using method chaining. It is used to handle asynchronous code.
A promise has 3 states :
Pending : this is the initial state of promise. Any method which returns a promise which have this value initially.

Fulfilled : When the promise is successful ( or resolved) it is said to be fulfilled.
Rejected : When the promise is failed ( or rejected).

In the above snippet asyncFunction returns a promise which can either be resolved or rejected based on the input we provide.
When the input is an even number , the promise is resolved . This indicates that the method execution was successful hence the caller function’s `then` will be called.
When the input is an odd number , the proimse is rejected. This is indicates failure hence the `catch` block will be invoked.
Note that then and catch are mutually exclusive i.e. only one of them will be executed at any time.

This not only simplified how developers used to write complex asynchronous code but also helped write error free code.
Multiple promises can be chained together. Promise also provides advance features like promises.all , promises.allSettled(added in later versions of ES).

Arrow functions :
ES6 provides more clear and concise way to create functions. function keyword no longer required to define a function. It can also be define using
=>’ thick arrow.
Arrow function also does not bind its own this i.e the context under arrow function is statically defined( lexical scoped) . Lexical scoped means , the value of this will not be depended on the object on which the function is invoked, instead it will be depended on the enclosing context. let’s understand through an example :

Classes : ES6 introduces class concept in Javascript. Before ES6 , constructor function was used to create an object. Class provides a template which we can use to create object later. consider below example :

In the above example , constructor() is a special method and it gets called every time you create an object. Classes can have methods, static methods and getter setter methods. The getter and setter method helps in implementing Encapsulation which states “data (i.e object properties) should not be accessed or modified outside of the object”. get method is used to access the property while the set method is used as value setter.

Destructuring :
ES6 introduced an important concept to extract multiple values from object and arrays called destructuring. The extraction is based on pattern.
To understand this , let’s first understand how data is constructed in JS :

Destructuring involves two sides :
Source : The right hand side i.e data which needs to be destructured .
Target : The left side i.e the pattern which is used for destructured. The pattern can be of following :
Assignment Target : It is usually a variable (i,j in the below example).
Object Pattern : {n : “pattern” , i: “pattern”}
Array Pattern : [“pattern” , “pattern”]

Template Literals:
Template literals or template strings allow embedded strings i.e Now we can create multiline strings and do string interpolation.

Default :
ES6 introduced a simple and intuitive way to pass default values for function parameters.

Other important additions:

Module Loaders
Weak set
Map
New Library
Proxies

--

--

Anis Alam
Anis Alam

Written by Anis Alam

Full Stack Engineer | Building Beautiful UI | Problem Solver

No responses yet