ES6 Features that you must know.

ES6 or ECMAScript 2015 is the 6th version of the ECMAScript programming language.

• Arrow Functions
• String interpolation
• Destructuring
• Default Parameter
• Spread Operator
• For..of
• Rest Operator
• Let
• Const
• Enhanced Object Literals

Arrow Functions

A short hand notation for function(), and is not required to bind with this.

Before ES6 
hello = function() {
  return "Hello World!";
}
After ES6
hello = () => {
  return "Hello World!";
}

String Interpolation

String interpolation is a really useful programming language feature that allows you to inject variables directly into a string.

var name = "Bob", time = "today";
console.log(`Hello ${name},how are you ${time}?`)

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.

Array Destructuring
var [a, , b] = [55, 56, 57]; 
console.log(a) 
console.log(b)
Object Destructuring
nodes = () => { 
   return {
     name: "Mango",
     type: "fruits",
     vitamin: "A,C"
   }
}
var { name: a, type: b , vitamin: c } = nodes()
console.log(a)
console.log(b)
console.log(c)

Spread Operator

The spread operator allows an expression to be expanded in places where multiple elements/variables/arguments are expected.

var parts = ["shoulders", "knees"];
var lyrics = ["head", ...parts, "and", "toes"];
console.log(lyrics)

For..of

New type of iterator, an alternative to for..in. It returns the values instead of the keys.

let list = [4, 5, 6];
console.log(list)
for (let i in list) {
  console.log(i); 
}

Output

list -> [4,5,6]
i -> 0
i -> 1
i -> 2

let list = [4, 5, 6];
console.log(list)
for (let i of list) {
  console.log(i);
}

Output

list -> [4,5,6]
i -> 4
i -> 5
i -> 6

Rest Operator

We can allow unlimited parameters to function by using the rest operator.

function printData(part1, ...part2) {
     return {part1, part2} 
}  
console.log(printData(1,2,3,4,5,6))

Output

printData(1,2,3,4,5,6) -> {“part1”:1,”part2":[2,3,4,5,6]}

Let

Variables declared inside a block {} can not be accessed from outside the block and it does not assign anything to window.

{
    var globalVar = "from demo1" 
}
{
    let globalLet = "from demo2"; 
}  
console.log(globalVar) // from demo1
console.log(globalLet) // ReferenceError: globalLet is not defined

Const

Const is for read-only variables. Thus anything assigned to variable can not be changed later in the program.

const a = "b"
a = "a" // TypeError: Assignment to constant variable.

Enhanced Object Literals

The ability to create JavaScript objects using literal notation is powerful. New features introduced from ES2015 (ES6) make object handling.

// ES5 code
var
  a = 1, b = 2, c = 3;
  obj = {
    a: a,
    b: b,
    c: c
  };

// obj.a = 1, obj.b = 2, obj.c = 3
// ES6 code
const
  a = 1, b = 2, c = 3;
  obj = {
    a
    b
    c
  };

// obj.a = 1, obj.b = 2, obj.c = 3

Others

There are a few other features that must be reviewed which makes ES6 more powerful.

• Classes
• Unicode
• Modules & Module Loaders
• Set
• WeakSet
• Map
• WeakMap
• Proxies
• Symbols
• Inheritable Built-ins
• New Library
• Binary and Octal
• Promises
• Reflect
• Tail Call Optimization