Quick ES6 Guide

Let & const Keywords

• Variables were previously declared using "var" which had function scope and were hoisted to the top within its scope. It means that a variable can be used before declaration.

• But the "let" variables and constants have block scope which is surrounded by curly braces "{}", they are not hoisted & cannot be used before declaration.

• The new const keyword makes it possible to define constants. Constants are read-only, you cannot reassign new values to them.

Let example:

let x = 10; //Here x is 10
{
    let x = 2; //Here x is 2
}
document.getElementById("demo").innerHTML = x;
//Output: 10

const example:

var x = 10; //Here x is 10
{
    const x = 2; //Here x is 2
}
document.getElementById("demo").innerHTML = x;
//Output: 10

Arrow Functions

• It provides a more concise syntax for moving writing function expressions by removing the "function" and "return" keywords.

• Arrow functions are defined using the fat arrow (=>) notation.

• Unlike ordinary functions, arrow functions do not have their own "this" keyword.

• The value of this inside an arrow function is always bound to the value of this in the closest non-arrow function.

• Arrow functions are not hoisted. They must be defined before they are used.

Arrow function Example:

//ES5 Function Expression
var sum = function(a,b) {
    return a + b;
}
console.log(sum(2,3));   //Output : 5

//ES6 Arrow function
var sum = (a,b) => a + b;
console.log(sum(2,3)); //Output : 5

Multi-line Strings

Users can create multi-line strings by using back-ticks(`). In ES5 we needed to use '\n' for multi-line statements.

//ES5 Syntax
var poemData = 'Jonny Jonny Yes Papa,\n'+'Eating sugar? No, papa!\n'+'Telling lies? No, papa!\n' + 'Open your mouth Ah, ah ,ah!'
//ES6 Syntax
var poemData = `Jonny Jonny Yes Papa ,Eating sugar? No, papa!, Telling lies? No, papa! , Open your mouth Ah, ah ,ah!`

Template Literals

ES6 introduces very simple string templates along with placeholders for the variables. The syntax for using the string template is ${PARAMETER} and is used inside of the back-ticked string.

//ES5 syntax
var name = 'Your name is' + firstName + ' ' + lastName + '.'

//ES6 syntax
var name = `Your name is ${firstName} ${lastName}.`

Destructuring Assignment

• The destructuring assignment is an expression that makes it easy to extract values from arrays, or properties from objects, into distinct variables.

• There are two types of destructuring assignment expressions, namely, Array Destructuring and Object Destructuring.

//Array Destructuring
let fruits = ["Apple", "Banana"];
let [a,b] = fruits; //Array destructuring assignment
console.log(a,b);
//OUTPUT: Apple Banana

//Object Destructuring
let person = {name: "Peter",age: 28};
let {name,age} = person; //Object destructuring assignment.
console.log(name,age);
//OUTPUT: Peter 28

Promises

Promises are used for asynchronous execution. We can use promise with the arrow function.

var asyncCall = new Promise((resolve,reject) => {
//do something
resolve();}).then(() => {
    console.log('DONE!');
})

Function Rest Parameter

The rest parameter (...) allows a function to treat an indefinite number of arguments as an array.

function sum(...args) {
    let sum = 0;
    for (let arg of args) sum += arg;
    return sum;
}

let x = sum(4, 9 ,16, 25, 29, 100, 66, 77);