ES5 vs ES6

ES5 vs ES6 -one of the most important questions asked in the interview!👻Modern browsers currently support ES5 but ES6 has made writing the code for devs much easier and also tackles a lot of limitations of the language.

ES5 vs ES6

Normal function vs Arrow function

Here is the ES5 version -

ES6 version-

The above code can also be written as-

In ES6 you don’t have to write the return keyword if you don’t write the function body inside braces.

String interpolation

ES5 version-

ES6 version-

Destructuring

If you have to extract multiple values from the ES5 object you have to write code like this:

ES6 version-

Merging Objects

Code of merging objects in ES5-

We have to merge the object using Object.assign() which takes both objects as input and outputs the merged object.

ES6 version-

Default

ES6 allows you to set the default value to the parameters.

Promises vs Callbacks

In ES5 async code is handles using callbacks-

In ES6 async code is handled using Promises to get rid of callback hell-

To know more about Promises and Callbacks- Promises, Callbacks

Var, let, and const

ES5 does not support let and const. var is supported in ES5.

To know more about var, let, and const — read this article.

Exporting & Importing Modules

The syntax of importing and exporting modules in ES6 has completely changed. Let’s have a look at ES5 exporting and importing syntax-

Export-

Import-

Now, let’s have a look at ES6 syntax-

Import-

The ES6 syntax is quite easy right!

Now let’s talk about named export(export) and export default

Named Export-

Export multiple values in a file-

export const x = 1;
export const y = 2;

Importing these values-

import {x, y} from './module';

1.With named exports, you can have multiple named exports per file.

2. Import the specific exports you want to be surrounded in braces.

3. The name of the imported module has to be the same as the name of the exported module

Default Export-

const x= () => {
    name:'Sher'
}
export default x;

Import it as-

import x from './module

1. You can have only one default export per file.
2. The naming of import is completely independent when you are using default export and you can use any name you like.

Thank you for reading this article.🙏🌺