ECMAScript 6 (ES6)
ES6 stands for ECMAScript 6 and was published in 2015. It is the newer version of JavaScript. Here, objects are created with the help of a new operator and an arrow function. There is no need to use the function keyword to specify the function. JavaScript data types have some new features in ES6. It introduced the 'symbol' primitive data type to allow unique values. The let and const variables are two additional ways to define variables in ES6.
Let us take a look at how to define any function in ES6 (this is just a single example. There are many other ways to define a function in ES6).
var sum = (a, b) => {
return a + b;
}
sum(2, 4); //6

You can also try this code with Online Javascript Compiler
Run Code
Here we are using the arrow function to declare the function. It is sometimes also known as the fat arrow function.
ES6 features
- Arrow Function: An arrow function allows a short syntax for writing function expressions. It is defined by the '=>' syntax.
- Objects: Objects are instances that contain key-value pairs. ES6 makes it simple to declare objects.
- Classes: ES6 classes are simple to implement. They are templates for JS objects.
- Destructing: It facilitates pattern binding, which is essentially based on pattern matching.
- Interpolation of strings: With the help of this, we can make multi-line strings without using any escape characters.
- Default Parameters Value: ES6 allows function parameters to have default values.
- Symbol type: It is a primitive data type and represents a unique "hidden" identifier that no other code can accidentally access.
- Modules: Modules can be implemented in two ways in ES6.
- Map: By this, we are able to use an object as a key.
- New Global Methods: isFinite() and isNaN() were added.
- Promises: It links "Producing Code" and "Consuming Code".
Advantages of ES6
- The function keyword is no longer needed in ES6.
- The use of the return keyword is optional.
- Arrow function for writing functions expressions.
- We have import statements.
- Classes and objects.
- Easy interpolation techniques.
- Enhanced object literals.
Disadvantages of ES6
- Browser support is not as good as ES5.
Differences between ES5 and ES6
Let's examine the distinctions between ES5 and ES6 with some examples.
1. Variables
In ES5, we use the var keyword to define any variables. However, in ES6, this is not the case. Here we are using const and let keywords define the variables. Let and const utilize block scope, whereas var utilizes function scope. Also, variables specified with const are immutable.
var name = “codingninjas”; //ES5
let name = “codingninjas”; //ES6

You can also try this code with Online Javascript Compiler
Run Code

Image source: ES5 vs ES6
2. Define objects
JS objects provide ways to define custom data types. Objects are instances that contain key-value pairs. ES6 makes it simple to declare objects.
var a = “this”;
var b = “is”;
var c = “complex”
var obj = {
a: a,
b: b,
c: c
} //ES5
var a = “this”;
var b = “is”;
var c = “not”;
var d = ”complex”;
var obj = {
a,
b,
c,
d
} //ES6
Looks like its easy, isn’t it?

You can also try this code with Online Javascript Compiler
Run Code
3. Merge objects
To merge objects in ES5, we use the Object.assign() function while in ES6 we use spread operator(...) as well as the Object.assign(). Spread operator does not alter the target variable, whereas Object.assign() does.
var person = {
"name": "Ninja",
"age": 20
};
var clothing = {
"shoes": "sneakers",
"shirt": "long sleeve"
};
var personWithClothes = Object.assign(person, clothing); //ES5
const person = {
name: 'Ninja'
}
const ages = {
age: 20
}
const merge = {
...person,
...ages
} //ES6

You can also try this code with Online Javascript Compiler
Run Code
4. Object Destructuring
Objects are manually removed one by one in ES5 while in ES6, it can be done using a single line of code. It can be done in the following ways.
var clothing = {
"shoes": "sneakers",
"shirt": "long sleeve"
};
var shoes = clothing.shoes;
var shirt = clothing.shirt; //ES5
var {
shoes,
shirt
} = clothing; //ES6

You can also try this code with Online Javascript Compiler
Run Code

Image source: object restructuring
5. Arrow Function
The arrow function was implemented in ES6. It allows a short syntax for writing function expressions.
const multiply = (a, b) => {
return ab * ;
}
multiply(2, 4); //8

You can also try this code with Online Javascript Compiler
Run Code

Image source: arrow function
6. String Interpolation
To combine strings in ES5, we use the concatenation operator while in ES6, template literal(`) is used for the same work.
var a = 5;
console.log("my value is " + a + " points"); //ES5
let a = 5;
let b = 5;
console.log(`ten is ${a + b} and not ${2 * a + b}.`); //ES6

You can also try this code with Online Javascript Compiler
Run Code
7. Importing and exporting module
Let us see how modules are imported in ES5 and ES6
module.exports = {
something: 'value'
};
const code = require('./code');
// or
const {
something
} = require('./code') //ES5
import code from './code'; //ES6
It's pretty simple in ES6, isn’t it?

You can also try this code with Online Javascript Compiler
Run Code
Now let us see how exporting any module works in ES5 and ES6
var ESmodule = {
console.log(“I want to understand ES5”)
}
module.exports = ESmodule; //ES5
export default ESmodule; //ES6

You can also try this code with Online Javascript Compiler
Run Code
8. Promises and Callbacks
Dealing with asynchronous programming is made simple with Promise. A promise is something that will be fulfilled in the future. Depending on the results of the operation, a Promise can be denied or resolved. Callbacks were used to execute asynchronous programming before Promises. A callback is a mechanism to handle the execution of a function after another function has finished.
Let us see an example of Promise:
let Promise = new Promise((resolve, reject) => {
let pro = 10;
if (pro == 10) {
resolve('Success');
} else {
reject('Failed');
}
})
Promise.then((message) => {
console.log("It is then block. The message is: ?+ message)
}).catch((message) => {
console.log("It is Catch block. The message is: ?+ message)
})

You can also try this code with Online Javascript Compiler
Run Code
Let us see how Callback works:
function isEqual(a, b, res) {
var same = false
if (a = b) {
equal = true
}
res(equal)
}
isEqual(1, 2, function(result) {
if (result) {
console.log('same');
} else {
console.log('not same')
}
})

You can also try this code with Online Javascript Compiler
Run Code
Frequently Asked Questions
Explain the difference between Object. freeze() vs const?
Const is a property that applies to bindings ("variables"). It generates an immutable bond, which means you can't change its value.
Object. freeze, on the other hand, works with values, specifically, object values. It makes an object immutable, meaning that its properties cannot be changed.
What is a generator in JS?
Generators are functions that can be exited and re-entered at a later time. Across re-entrances, their context (variable bindings) will be preserved. The function* syntax is used to write generator functions.
Why should we use ES6 classes?
We should use ES6 classes because the syntax is clearer and less prone to errors. Setting up inheritance hierarchies with the new syntax is significantly easier (and less error-prone) than with the old.
Conclusion
Eventually, we went over the fundamental differences between ES5 and ES6. We discovered what distinguishes ES5 from ES6. In terms of differences, we saw a number of examples of ES5 and ES6. Last but not least, we learned about the upsides and downsides of ES5 and ES6.
Recommended Readings:
Refer to our guided paths on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc; you must have a look at the problems, interview experiences, and interview bundle for placement preparations.
Nevertheless, you may consider our paid courses to give your career an edge over others!
Do upvote our blogs if you find them helpful and engaging!
Happy Learning!