ES5 vs ES6 ( With example code )

Reducing code with Arrow Function

ES5 vs ES6 comparison – Arrow functions improved the readability and reduced the amount of code in JavaScript. Let’s look at a few alternative approaches to define function right now.

Here is the ES5 version:

function greetings (name) {
 return 'hello ' + name
}

Take a look at the many methods by which we may define a function in ES6.

const greetings = (name) => {
 return `hello ${name}`;
}

You can see the difference: we no longer need to use the function keyword to create the function, which is a significant improvement, right?

Take a look at how we may define a function in ES6 in another method.

const greetings = name => `hello ${name}`;

This is the code reduction that we discussed before. If your function only has one parameter in ES6, you can remove the parentheses surrounding the parameter entirely.

Another thing to note is that we don’t need to use the return keyword to return the computed value; with ES6, if you don’t wrap the function body in braces, the computed expression is returned automatically when the function is called.

Manipulating objects in ES5 vs ES6

In ES6, objects undergo a big makeover. Working with objects has been much easier because to features like object destructuring and rest/spread operators. Let’s get right to the code and see whether we can combine two objects in ES5.

var obj1 = { a: 1, b: 2 }
var obj2 = { a: 2, c: 3, d: 4}
var obj3 = Object.assign(obj1, obj2)

We must use Object.assign() to combine the objects, which accepts both inputs and outputs the merged object. Let’s look at how we might solve this issue with ES6.

const obj1 = { a: 1, b: 2 }
const obj2 = { a: 2, c: 3, d: 4}
const obj3 = {...obj1, ...obj2}

Isn’t it simple? For the developer, combining objects is a breeze using the spread operator.

Let’s look at object destructuring right now. If you need to extract several values from ES5, write the following 3–4 lines of code:

var obj1 = { a: 1, b: 2, c: 3, d: 4 }
var a = obj1.a
var b = obj1.b
var c = obj1.c
var d = obj1.d

It takes a long time. Oh, no! ES6 is come to save the day.

const obj1 = { a: 1, b: 2, c: 3, d: 4 }
const {
  a,
  b,
  c,
  d
} = obj1

Cool! Last but not least, have a look at another new functionality for objects.

In ES5, we define an object similar to this.

var a = 1
var b = 2
var c = 3
var d = 4
var obj1 = { a: a, b: b, c: c, d: d }

In ES6 you will do something like this:

var a = 1
var b = 2
var c = 3
var d = 4
var obj1 = { a, b, c, d }

Yes, you may use this shortcut if the name of the key and the variable we’ll assign to it are the same.

Promises vs Callbacks in ES5 vs ES6

We all know that JavaScript is an async language. When we create code, this capability provides us with a lot of flexibility. We have a non-blocking architecture at our disposal, which allows us to simply develop non-dependent code.

Here’s an example of an Async function written in ES5.

function isGreater (a, b, cb) {
  
  var greater = false
  if(a > b) {
    greater = true
  }
  cb(greater)
}
isGreater(1, 2, function (result) {
  if(result) {
    console.log('greater');
  } else {
    console.log('smaller')
  }
})

Above, we defined the isGreater function, which accepts three arguments: a, b, and cb. When the function is run, it checks if a is greater than b and sets the larger variable to true if it is, else it remains false. The greater variable is then passed as an input to the callback function cb, which is called by isGreater.

The isGreater method is called next, and we provide it a and b along with our callback function. We check if the result is true or false inside the callback function and display the appropriate message. Let’s have a look at how ES6 handled this.

const isGreater = (a, b) => {
 return new Promise ((resolve, reject) => {
  if(a > b) {
   resolve(true)
  } else {
   reject(false)
  }
 })
}
isGreater(1, 2)
 .then(result => {
    console.log('greater')
 })
 .catch(result => {
    console.log('smaller')
 })

Promises in ES6 allow us to resolve and reject requests. When we resolve a request, the callback given in that request is called, and when we refuse a request, the catch callback is called.

Promises are superior to callback because they allow us to quickly distinguish between success and error, eliminating the need to double-check for items in our callback method.

Exporting & Importing Modules

With the release of the ES6 specification, the syntax for exporting and importing modules totally changed. Let’s look at how we may export a module in ES5.

var myModule = { x: 1, y: function(){ console.log('This is ES5') }}
module.exports = myModule;

Here is the ES6 implementation

const myModule = { x: 1, y: () => { console.log('This is ES6') }}
export default myModule;

The ES6 syntax is easier to comprehend in this case. Along with the export keyword, ES6 also introduces export default. But first, let’s look at how importing a module has evolved in ES6.

Here is the ES5 version

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

Here is the ES6 version

import myModule from './myModule';

So, as promised, let us now discuss the export default. We’ll import a module like this if you export something using default.

import myModule from './myModule';

The preceding line implies that by default, we exported a module, and we must import the entire module into your source file.


However, ES6 also allows us to export and import many child modules or variables from a single parent module.


As a result, you’ll export your module like this in your module file.

export const x = 1;
export const y = 2;
export const z = 'String';

And import them something like this

import {x, y, z} from './myModule';

To import many child modules from a single parent module, we utilized ES6 object destruction.

That’s all for this article if you have any queries please contact us through our website or email us at [email protected]

Leave a Comment