What is the difference between ES5 and ES6?

ES5 is also known as Ecmascript 2009 as it is released in 2009. For ES5 you have to write function keyword and return, to be used to define the function, like normal javascript function.

ES6 is also know as Ecmascript 2015 as it is release in 2015. it’s class allows the developer to instatiate an object using the new operator, using an arrow function, in case it doesn’t need to use function keyword to define the function, also return keyword can be avoided to fetch the computer value.

Datatypes in ES5 vs ES6

In ES5 there are only one way to define the variables using var keyword. And In ES6 there are two new ways to define the variables that are let and const.

Function in ES5 vs ES6

In ES5 we use the function keyword to define the function and In ES6 we use the arrow function to define the function.

Here is the ES5 version

function test(name){
   return 'Hello' + name;
}

Here is rewritten of this function in ES6

var test=(name)=>{
     return `Hello $(name)`;
}

we also rewritten this above function in this way

var test = name => 'Hello $(name)`;

In above you see that the reduction of code in ES6 function. In ES6 if your function has a single parameter then you can altogether ditch the parenthesis around the parameter.

Objects in ES5 vs ES6

In ES6 objects are easy to use beacause object destructuring and spread operator taking less line of code in ES6.

We will do object destructuring in this below code. It will taking the 3–4 lines of code to do a object destructuring in ES5.

var Object = {x:1, y:2, z:3}
var x= Object.x;
var y= Object.y;
var z= Object.z;

It will be easy to do in ES6.

const Object = {x:1, y:2, z:3}
const {x, y, z} = Object;

How to do the object merging in ES5. let’s see below

var Object1 = { x:1, y:1}
var Object2 = { a:1, b:2, c:3}
var Object3 = Object.assign(Object1, Object2)

And How to do the Object merging in ES6. Let’s take a look.

const Object1 = { x:1, y:1}
const Object2 = { a:1, b:2, c:3}
const Object3 = {...Object1, ...Object2}

Exporting & Importing Modules

After coming of Es6 the lot of change in syntax in exporting & importing modules.

Let’s take a look how to export Modules in ES5

var test = {a:1, b=function(){console.log('this is a ES5')}
module.exports = test;

Here is the implementation of ES6

const test ={a:1, b:()=>{console.log('this is a ES6')}
export default test;

The Es6 syntax is more readable but also the Es6 syntax is using the arrow function. Let’s take a look at the importing the modules in ES5 and ES6.

Here is the ES5 version

var test = require('./test');

Here is the ES6 version

import test from './test'; // using export defualt
import {test} from './test'; //without using default                          

Conclusion

In ES6 lot’s of things get change datatypes, functions, Objects, promises callbacks, Importing & exporting modules and everytime when the newer version comes lot’s of things cames and decreasing the lines of code and increasing the performance. If you have any queries related to this article then feel free to comment below.

Don’t forget to clap on this article. Happy Learning!