ES6 Important Features | Learn ES6 in 1 hour
ECMA Script 6
ECMAScript (or ES) is a scripting-language specification standardized by Ecma International. It was created to standardize JavaScript, so as to foster multiple independent implementations. ECMAScript is commonly used for client-side scripting on the World Wide Web, and it is increasingly being used for writing server applications and services using Node.js. ECMA Script 6 also known as ES6 or ECMA Script 2015 is the 6th version of ECMA Script. It adds many new syntax for writing complex applications,
- Class
- Arrow Function
- String Interpolation
- Destructuring
- Spread
Classes
In ES6, a class is defined with the keyword class
. Class function basically creates a template that we can use to create objects later.
It can be inherited from other classes using extends
keyword. A class is initialized with a constructor function which should compulsorily
contain super()
function. A constructor is a function that is called each time an object is created.
1
2
3
4
5
6
7
8
9
class Person{
constructor(name, age){
this.name= name;
this.age= age;
}
}
const suman = new User('suman', 22);
console.log(suman) // Object {age: 22,name: "suman"}
Arrow Function
Arrow functions provides a concise way to write functions in JavaScript. The significant advantage it offers is that it does not bind
its own this
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let Human = function(person, age) {
this.person = person;
this.age = age;
this.info = function() {
document.write(this);
displayInfo(() => {
// here this=Human."this" has been inherited
document.write(this.person + " is " + this.age
+ " years old");
});
}
}
let human1 = new Human('John', 21);
human1.info(); // John is 21 years old
An arrow function’s this value is the same as it was immediately outside it. If used outside any enclosing function, an arrow function inherits the global context, thereby setting the value of this to the global object.
String Interpolation
String interpolation means inserting variable within the string.
1
2
3
4
5
6
7
var name = "Bob", time = "today";
var multiLine = `This
Line
Spans Multiple
Lines`;
console.log(`Hello ${name},how are you ${time}?`) // Hello Bob, how are you today?
console.log(multiLine)
Destructuring
Destructuring in ES6 is the process of assigning values of arrays or properties of objects to separate variables with a single expression.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Array destructuring:
var [x,y]= [1,2];
console.log(x); //1
console.log(y); //2
[x, y, ...rem] = [33,44,55,66,77,88,99];
console.log(x); //33
console.log(y); //44
console.log(rem); //[55,66,77,88,99]
var a = [2,4,6,8,10];
var [b,c] = x;
console.log(b); //2
console.log(c); //4
Object Destructuring:
var {a,b} = {a:55, b:66};
console.log(b); //66
console.log(a); //55
var obj = {s: 78, t: true};
var {t: app, s: bar} = obj;
console.log(app); // 78
console.log(bar); // true
Spread
Spread syntax helps an array or string expression to expand in the situations where zero or more arguments or values are expected. It allows a variable to spread its corresponding values at a required place. It used spread operator (…) as a prefix of the variable.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a= [1,2,3,4,5];
var x = [11, a, 22];
console.log(a); //[1,2,3,4,5]
console.log(...a);
// 1
// 2
// 3
// 4
// 5
console.log(x); // [11,1,2,3,4,5,22]
function add(x, y, z) {
return x + y + z;
}
const num = [11, 22, 33];
console.log(add(...num)); //66
Summary
In the end, ECMA Script 6 gives us very useful and common features of classes, arrow functions, interpolation, destructuring, spread etc. This helps to make javascript easy to understand and use.