Some Topics About ES6

Block Bindings

In JavaScript when we use variable, we actually bind it. So what is binding? When we declare and/or initialize a variable, we actually bind a value to in its name inside the scope of the program.

var x;
let y;
const z = nextValue;

Var Declarations and Hoisting

var a = 5;
if (true){
  var a = 5;
  console.log(a);   // 5
}
console.log(a);    // 5

In ‘var’ keyword variable declaration we can use variable’s values every where from the scope, and this is a problem, for this issues ES6 we use ‘let’ & ‘const’ keyword.

x=40;
console.log(x);   //40
var x;

In the above code we decarded variable at last of all code, but JavaScript it brings to the first and it is called hoisting. But what happened when we use ‘let’ and ‘const’.

x=40;
console.log(x);   //refferenceError: 
let x;
x=40;
console.log(x);   //SyntaxError: 
const x;

So, we can apply Hoisting only in normal JavaScript.

Block Level Declarations

If we declarer a variable the outside the block scope using ‘let’ and ‘const’ its cannot access the decelerated value. So, block scope can be created in a function use wrapped curly { } braces

var x = 1;
let y = 1;
if (true) {
  var x = 2;
  let y = 2;
  console.log(y);
}
console.log(x);    // expected output: 2
console.log(y);   // expected output: 1
console.log(y);   // shows output: 2

Block Binding in Loops

In For Loop ‘var’ behaves differently with ‘let’ and ‘const’

for (var i=0; i < 10; i++) {
    process(items[i]);
}

// i is still accessible here
console.log(i);                     // 10

In this for loop ‘i’ is still accessible if it complete its looping, but when we use ‘let’, what is happen, lets see

for (let i=0; i < 10; i++) {
    process(items[i]);
}

// i is not accessible here - throws an error
console.log(i);

but in this loop once the loop is complete, the variable is destroyed and is no longer accessible elsewhere

Global Block Bindings

Now this is another example of ‘var’ different form ‘let’ and ‘const’ and this is Global scope behavior. When we used ‘var’ in the global scope, it creates a new global variable, and it property of a global object. so we can you can overwrite an existing global variable using ‘var’

var global= "Hello!";
console.log(window.global);     // "Hello!"

var newGlobal= "Hi!";
console.log(window.newGlobal);        // "Hi!"

This example declares a new global variable globalthat overwrites the original. Similarly, newGlobalis defined as a global variable and immediately defined as a property on window.

If you instead use ‘let’ or ‘const’ in the global scope, a new binding is created in the global scope but no property is added to the global object.

let global= "Hello!";
console.log(window.global);     // "Hello!"
console.log(window.global=== global); // false
const newGlobal= "Hi!";
console.log(window.newGlobal);        // "Hi!"
console.log("newGlobal" in window);           // false

Functions with Default Parameter Values

function default(text){
   console.log(text)
}
default("this is use input") //text= this is use input
function default(text = "this is default"){
   console.log(text)
}
default() //text= this is default

When we pass a parameter in a function its show in the function. but if user nothing give input in the parameter. what will happened? we can easily fixed by putting a default parameter in the parameter. If no parameter pass then it will show otherwise passed parameter shows.

Working with Unnamed Parameters

function allNumbers(x, y){
  console.log(`x = ${x}, y = ${y}`
}
allNumbers(12, 13)  // x = 12, y = 13
function allNumbers(x, y, ...z){
  console.log(`x = ${x}, y = ${y}, z = ${z}`
}
allNumbers(12, 13, 45, 8, 6, 69) // x = 12, y = 13, z = 45, 8, 6, 69

If we pass lots of number as parameters we don’t assign different parameter for these number, we just need to assign rest parameter or unnamed parameter. the unnamed parameter is include (…) dots of a parameter.

Spread Operator

function totalNumber(x, y, z){
   return x + y + z;
}
let numbers = [1, 2, 3];
console.log(totalNumber(numbers[1],numbers[2],numbers[3]);
//when use spread Operator it is so easy
console.log(...numbers);

In a function when we want to pass parameter from an array, we don’t need to pass the element individually as item for the parameter. we just use three dots (…) of this array name. Its as like as Rest parameter, but it works differently from rest parameter. Rest parameter only use as a last parameter of the parameter items, but Spread operator can be used any where of the total parameter.

Block Level Function

If we declarer a variable the outside the block scope function using ‘let’ and ‘const’ its cannot access the decelerated value. So, block scope can be created in a function use wrapped curly { } braces, but when we use ‘var’ the value can be accessible outside function

function english1(){
    var a = 'story';        
    const b = 'Nobel';     
    let c = 'poem';
    function english2(){
        console.log(a);
        console.log(b);
        console.log(c);
    }
    english2();
}

english1();

//result:
//story
//Nobel
//poem

Arrow Functions

//Tradition Function
function func1(){
   console.log("This normal function)
}
func1();  //This normal function;
//Arrow Function
const func2 = () => {
   console.log("This arrow function)
}
func1();  //This arrow function;

The above code shows the difference between Arrow Function and traditional function. Arrow function when return the value it looks like

const func3 = () => {
  return "This function 3"
}
console.log(func3());
//another easy way to express arrow funciton
const func3 = () => "This function 3"
console.log(func3());