ES6 Features In Javascript

Detailed explanation on all ES6 features in Javascript with examples

ES6 (ECMAScript 2015) is a major update to JavaScript that includes dozens of new features. With a focus on simplicity and readability.
Let’s find out what is new in JavaScript and most importantly when and how you should use it.

1. Arrow Functions
A short hand notation for function(), but it does not bind this in the same way.

Below is the example for arrow function syntax

The return statement is not required for single expressions.

Simple right!! But how about “this”?

Arrow functions do not have their own this.

Let us see the example of ES5 function which binds this.

Either you need to copy “this” or bind “this”.

This is where Arrow functions play its role. Arrow functions do not have there own “this”.

As we have used arrow function there is no necessary to use bind, “this” refers to the “fives” array which is declared above the function.

2. Scoping With “Let” and “Const” Keywords.
Block level scoping with let, const & var

In ES6, The “let” statement allows you to declare a variable with block scope. Whereas block doesn’t do anything for “var”.

In the above example, value to the globally declared variable “x” has been changed inside the block as well when using “var”.

But when using the “let” keyword, the value of “x” remains the same throughout because of the block scope, i.e, the value assigned inside the block can be accessed within the block. So the global value remains the same.

NOTE: var can be redeclared n number of times but let can be redeclared only once per scope.

Also “let” does not assign anything to the window object.

“const” is read-only variables that are immutable, i.e value cannot be changed.

But objects declared as “const” can still be mutated.

3. Template Literals in ES6

String interpolation is a way to add output variable value to the string, which has been made easy.

In ES5 it was a big task to break string and add variables.

ES6 does this in a very simple way.

ES6 also supports multi-line texts.

4. Enhanced Object Literals

ES6 makes declaring object literals even more succinct by providing shorthand syntax for initializing properties from variables and defining function methods. It also enables the ability to have computed property keys in an object literal definition.

a. Property value shorthand

The new property value shorthand lets us abbreviate the initialization of a property within an object literal, provided that the property key matches an existing variable name.

As you can see, the ES6 syntax is a bit more succinct by being less repetitive with the removal of the colon (:) and the matching variable.

b. Computed property keys

With object literals in ES5, we can either have a string literal or a fixed alphanumeric name. ES6 now allows property keys of object literals to be use expressions, making them computed property keys.

c. Method definition shorthand

As you can see, the colon (:) and the function keyword can now be omitted making the syntax even more succinct.

5. Destructuring
Extraction of requested elements

ES6 enables the extraction of requested elements from the array or object and assigning them to variables.

6. Default Parameter

ES6 gives you the flexibility to assign a default value.

7. Spread Operators

ES6 enables the extraction of array or object content as single elements.

Also with shallow copy and merging with arrays.

8. Classes in ES6

ES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. They are effectively simple sugaring over prototype-based OO, offering a convenient declarative form for class patterns which encourage interoperability.

Before the class syntax was available, if you wanted to do OOP you would need to use a constructor function.

This worked well until you wanted to add inheritance or someone forgot to use the new keyword when using the function.

The ES6 syntax is a little more verbose, but not that different.

Inheritance

With constructor functions, there were a few manual steps that had to be taken to properly implement inheritance before ES6.

ES6 classes no longer have to manually copy the parent class’s prototype functions and reset the child class’s constructor.

Methods

ES6 makes adding methods to classes easier and more readable.

With constructor functions, we would have to modify the prototype of our function directly.

With ES6 classes, we can add the method definition directly in the class declaration.

9. Promises

Promises are all about making asynchronous calls easy and effortless.

Observe that the constructor accepts a function with two parameters. This function is called an executor function and it describes the computation to be done. The parameters conventionally named resolve and reject, mark successful and unsuccessful eventual completion of the executor function, respectively.

The resolve and reject are functions themselves and are used to send back values to the promise object. When the computation is successful or the future value is ready, we send the value back using the resolve function. We say that the promise has been resolved.

Can we access the value passed by the resolve or reject?

Yes, All Promise instances have a .then() method on them.

10. Array helper functions

There are a lot of functions which helps in playing with arrays

forEach

map

Creates a new array with the output of the provided function.

filter

It creates a new array with the output of the provided function but returns values that matches the required condition.

reduce

Applies a function passed as the first parameter against an accumulator and each element in the array (from left to right), thus reducing it to a single value. The initial value of the accumulator should be provided as the second parameter of the reduce function.

“Thanks for reading. I hope this helped you.!!!”