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.