Here are some topics of mighty ES6 for you

Var Declarations and Hoisting

All the variables declared with var acted as if they are initialized at the top of the code block. This believer of a var variable is called ‘hoisting’.

function getColor(value) {
  if(value > 20) {
    var color = 'red'; 
    return color;
  } else {
    console.log(color)  // no error. color is undefine 
    return "blue"; 
  } 
  // color is also accessible from here with the value undefine
}

It may be confusing that how color can be accessible from everywhere within the function. JavaScript actually modified the code like this

function getColor(value) {
  var color;
  if(value > 20) {
    color = 'red'; 
    return color;
  } else {
  console.log(color)  // no error. color is undefine 
  return "blue"; 
  }
  // color is also accessible from here with the value undefine
}

The declaration of the color is hoisted all the way up but notice that only the declaration is hoised, initialization remains on the same spot. That's why the color variable is accessible within the whole function.

Let Declarations

ES6 introduces let to declare variables. It is a block-level declaration that means let variable is available only in the current code block. It can’t be accessed from the outside of the block.

function myFunc() {
  let x = 50;
  console.log(x);
}
console.log(x)   // x is not available here

It can’t redeclare within the same block but its value can be changed.

let max = 60;
max = 50;  // ok

Let variable is destroyed as soon as the block has finished executing.

Const Declaration

Const acts as let but its value can’t be changed. It’s also a block-level declaration.

const number = 5;
number = 6  // throws error

Like let variable once the block has finished executing const variable is also destroyed.

Function with Default Parameter

ES6 lets you provide the default parameter value in function by initialization of parameters with values.

function add(value1 = 5, value2 = 10) {
  return value1 + value2;
}

when calling add function if anyone just calls this function without providing any arguments the result would be 15.

console.log(add());        // 15
console.log(add(10, 20))   // 30
console.log(add(50))       // 60

Rest Parameter

You can access all of your parameters using (…). Heres how it works

function addNumbers(...numbers) {
  let sum = 0;
  for(let i = 0; i < numbers.length; i++) {
    sum += numbers[i]
  }
  return sum;
}
console.log(addNumbers(4, 6, 10, 20));     // 40

But you can’t use any parameter after the rest parameter. The rest parameter must be the last parameter of the function. However, you can use as may parameter before the rest parameter

function addNumbers(...numbers, another) {
    // error 
}
function addNumbers(first, ...numbers) {
    // ok 
}

The Spread Operator

The spread operator is related to the rest parameter. It has the same syntax as the rest parameter. That's why it is often called a three-dot operator. A simple example of this operator is to copy all elements from an array to another.

function addNumbers(...numbers) {
  let sum = 0;
  for(let i = 0; i < numbers.length; i++) {
    sum += numbers[i]
  }
  return sum;
}
let mainArray = [2, 4, 6, 8, 10];
console.log(addNumbers(...mainArray));  // 30

In this example, the addNumber function uses the rest parameter to access all the parameters and to call the function the spread operator is used to pass all the arguments.

Arrow Function

Arrow functions are, as the name implies, functions defined with a new syntex that uses an arrow.

const add = (x, y) => x + y;
// in normal function
function add(x, y) {
  return x = y;
}

All the parameters are in the parentheses. If there are no parameters then the parentheses will be empty.

const getAge = () => 45;
// in normal function
function getAge() {
  return 45;
}

Block-Level Function

ES6 lets you declare a function inside a block. In this case, the function is hoisted up to the top of the block and can be accessed throughout the block. Once the block has finished executing, that function is no longer exists.

"use strict";
if(true) {
  console.log(typeof myFunct);   // function
  
  function myFunct() {
    // ...
  }
  
  myFunct();
 
  console.log(typeof myFunct);   // function
}

Block-Level Function in Non-strict Mode

In ES6 you can also use the block-level function in nonstrict mode, but it is slightly different than strict mode. Instead of hoisting at the top of the block, in non-strict mode, functions are hoised all the way to the containing function.

if(true) {
  console.log(typeof myFunct);   // function
  
  function myFunct() {
    // ...
  }
  
  myFunct();
 
  console.log(typeof myFunct);   // function
}
console.log(typeof myFunct);     // function

Template Strings

Template strings are strings where you can use expression inside of a string. Template strings are enclosed by the backtick (``). You can use a placeholder inside the template string to hold the expression. Placeholders are indicated by the dollar sign and curly braces `${expression}`.

const x = 5;
const y = 10;
const myString = `Sum is ${x + y}`;
console.log(myString);      // 15

That's all for today. Thank you for your time.