Top 10 Modern Javascript Features Every Javascript Developer Must Know

ECMAScript 2015 commonly known as ES6 or ES2015 released in June 2015. ES5 was released in December 2009. It would then take almost six years for the next version of ECMAScript to be released. So, there are many exciting features in ES6.

1. Default Parameters in Modern Javascript
2. Template Literals in Modern Javascript
3. Multi-line Strings in Modern Javascript
4. Destructuring Assignment in Modern Javascript
5. Arrow Functions in Modern Javascript
6. Promises in Modern Javascript
7. Block-Scoped Constructs Let and Const
8. Modules in Modern Javascript

Default Parameters in Modern Javascript

var calculateArea = function(height = 50, width = 80) {
// write logic
...
}

In ES5, we were using logic OR operator.

var calculateArea = function(height, width) {
height = height || 50;
width = width || 80;
// write logic
...
}

2. Template Literals in Modern Javascript

var name = `Your name is ${firstName} ${lastName}.`

In ES5, we have to break strings like below.

var name = 'Your name is ' + firstName + ' ' + lastName + '.'

3. Multi-line Strings in Modern Javascript

let poemData = `akaid akaid Yes Papa,
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`

In ES5, we had to use the below approach.

var poemData = 'akaid akaid,\n'
+ 'Eating sugar? No, papa!\n'
+ 'Telling lies? No, papa!\n'
+ 'Open your mouth Ah, ah, ah!'

4. Destructuring Assignment in Modern Javascript

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

In ES5, we had to use below approach.

var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); // 42
console.log(q); // true

5. Arrow Functions in Modern Javascript

$('.btn').click((event) => {
this.doSomething()
});

In ES5, we had to use _this = this or .bind(this).

var _this = this;
$('.btn').click(function(event){
_this.doSomething();
});

6. Promises in Modern Javascript

var asyncCall = new Promise((resolve, reject) => {
// do something async
resolve();
}).then(()=> {
console.log('Yay!');
})

In ES5, we need to use setTimeout().

setTimeout(function(){
console.log('Yay!');
}, 1000);

7. Block-Scoped Constructs Let and Const

In Modern Javascript,

function calculateAmount(boolVal) {
let amount = 0; if(boolVal) {
let amount = 1; // scope of this amount ends with next closing bracket
} return amount;
}
console.log(calculateAmount(true)); // output: 0

In ES5,

function calculateAmount(boolVal) {
var amount = 0;
if(boolVal) {
var amount = 1;
}
return amount;
}
console.log(calculateAmount(true)); // output:

8. Modules in Modern Javascript

In ES6, there are modules with import and export operands.

export var userID = 10;
export function getName(name) {
...
};

We can import userID variable and getName method using import statement .

import {userID, getName} from 'module';
console.log(userID); // 10

9.