ES6 is or ECMAScript6 or ECMAScript2015 is so far the latest release in JavaScript history.
The brief history of JavaScript:
- 1995: JavaScript is born as LiveScript,
- 1997: ECMAScript standard is established,
- 1999: ES3 comes out and IE5 is all the rage,
- 2000–2005: XMLHttpRequest, a.k.a. AJAX,,
- 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, - 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!!