What’s new in ES6

Posted on by Admin

ES6 is or ECMAScript6 or ECMAScript2015 is so far the latest release in JavaScript history.

The brief history of JavaScript:

  1. 1995: JavaScript is born as LiveScript,
  2. 1997: ECMAScript standard is established,
  3. 1999: ES3 comes out and IE5 is all the rage,
  4. 2000–2005: XMLHttpRequest, a.k.a. AJAX,,
  5. 2009: ES5 comes out (this is what most of us use now) with forEach, Object.keys, Object.create (specially for Douglas Crockford), and standard JSON,
  6. 2015: ES6/ECMAScript2015 comes out;

So the below article is divided into some of the important features of ES6.

1. Constants

let is the new var. const is single-assignment

let x = 1;
if (x === 1) {
 let x = 2;
 console.log(x);  // expected output: 2
}
console.log(x);  // expected output: 1
const number = 42;
try {
 number = 99;
} catch(err) {
 console.log(err); // expected output: TypeError: invalid assignment to const `number'
 // Note - error messages will vary depending on browser
}
console.log(number); // expected output: 42

 

2. Default Parameter

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.

function multiply(a, b = 1) {
 return a * b;
}

console.log(multiply(5, 2)); // expected output: 10
console.log(multiply(5));// expected output: 5

 

3. Arrow Function Expression:

An arrow function expression has a shorter syntax than a function expression. They are  syntactically similar to the related feature in Java8.

var materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium'];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]

 

4. Classes

This feature gave OOPS based programming. Developers coming from Java or C# will be  more happier to code in this style than how we used to do in ES5.

class Polygon {
 constructor() {
 this.name = "Polygon";
 }
}

var poly1 = new Polygon();
console.log(poly1.name); // expected output: "Polygon"

 

3. Template Literals in ES6

Template Literals or Interpolation helps us in constructing strings. This saves us from any unforeseen injection attack.

var first = "Bob", last = "Singh";
var name = `Your name is ${first} ${last}.` 
var id = 2;
var url = `http://localhost:3000/students/${id}`

 

4. Iterator & For-Of Operator

The for...of statement creates a loop iterating over iterable objects.

function* foo(){
 yield 1;
 yield 2;
}

for (let o of foo()) {
 console.log(o); // expected output: 1 2
}

 

5. Modules

Modules are like Packages in Java.

//mymath.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "mymath;
console.log("2π = " + math.sum(math.pi, math.pi));

 

6. Map/Set & WeakMap/WeakSet

//Set
let s = new Set()
s.add("hello").add("goodbye").add("hello")
console.log(s.size === 2) // print true
console.log(s.has("hello") === true) //print true
for (let key of s.values()) // insertion order
   console.log(key)

//Map
let m = new Map()
m.set("One", 1)
m.set("two", 2)
m.set("three", 3)
m.set("four", 4)

for (let [ key, val ] of m.entries())
    console.log(key + " = " + val)

 

7. Promises

Promises are a library for asynchronous programming. First class representation of a value that may be made asynchronously and be available in the future.

8. Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

var a, b, rest;
[a, b] = [10, 20];

console.log(a); // expected output: 10

console.log(b); // expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest); // expected output: [30,40,50]

 

Hope this helps!!

 

!!The Article will be edited in future as well!!