ES6, ECMAScript or Harmony is the sixth major update release of ECMAScript language. Mostly browser supports it now But if you are developing for old version of browsers or Internet explorer then you can use Bable .
It is a transpiler for JavaScript best known for its ability to turn ES6 (the next version of JavaScript) into code that runs in your browser (or on your server)

Features of ES6 :

Let and Const

Var keyword that we are used to familiar with in javaScript. which has function level scope.

this means whenever variable is created with var in a function, It only exist within the function.

let on the other hand is a block scoped. This means whenever the variable is created with let only exist within the scope.
A block in JavaScript is anything within a pair of curly braces.

Const is the similar to the let. But we can’t reassign value to it.


output:-

Es6 Const reassign output

Default Parameters

Previously we have to do these statements for default parameters:


Most Noteworthy the Es6 the saviour,

Which provide us Default Parameter Feature:


Output:

Es6 Default parameter

While we can see, We didn’t pass the arguments in above student function that’s only invoked when no parameter is passed.

Template Literals

To put the values of variables in a string we had to break strings like this in Es5.


But now we can use Template Literals in which we use new syntax where we put variable in ${variable_name} inside the back ticked string.

Multi-line strings

We can use template literals in multi line so we don’t need to use concatenation.


Destructing

Destructing is very convenient way to get values out of arrays and objects.

Es5: Objects

Es6: Objects


Arrays

Spread Operator

This operator takes array and spread it in to a comma separated list of arguments

Rest Operator

Rest Operator works opposite of spread operator. It takes rest of values and pack it into the array. which means converting comma separated values into the array.

Classes And Constructor

Es6 also brings the concept of classes and constructor like other object oriented languages.

Inheritance

With help of extends keyword we can create subclass or child class. which will have its parent’s properties.


In above Example juniorStudent is extending the student properties and super keyword is initializing the student’s properties.

Modules Import/Export

Import :

export :

Arrow Functions

Arrow Functions are denoted by fat arrow => . It is one of the most common feature of Es6.

It will make your code pretty cool and also shorter.

the arrow function doesn’t have a “this”, it uses the parent’s “this”. “this” always points to the parent.

Conclusion:

These are the some common and Awesome Features of Es6. Which I use alot and from now you will be using.

Everything requires practice keep practicing.

Thanks for Reading. If you like it please consider sharing it. This may help you and someone else too.


Suraj Sharma

Developer who never forgets semicolon.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: