Hoisting,Let,Const,Function as First Class Object

sample

/////////////////////////////////////////////////// Hoisting Concept /////////////////////////////////////////
// 1.Declration are hoisted
// Example 1
// output => 5
/*
x = 5; // Assign 5 to x
console.log(x); // display x 
var x; // Declare x 
*/

//Example 2
//output => 5
/*
var x; // Declare x
x = 5; // Assign 5 to x
console.log(x); // display x  
*/

// 2.Initializations are Not Hoisted

//Example 3
//output => 5 7
/*
var x = 5; // Initialize x
var y = 7; // Initialize y
console.log(x + " " + y);          // Display x and y
*/

//Example 4
//output => 5 undefined
//Because of hoisting, y has been declared before it is used, but because initializations are not hoisted, the value of y is undefined.
/*
var x = 5; // Initialize x
console.log(x + " " + y);          // Display x and y
var y = 7; // Initialize y 
*/ 

//Example 4 equivalent to
/*
var x = 5; // Initialize x
var y;     // Declare y
console.log(x + " " + y);          // Display x and y
y = 7;    // Assign 7 to y 
*/

//Tips
// 1.To avoid bugs, always declare all variables at the beginning of every scope.

//Side note
// 1.JavaScript in strict ("use strict") mode does not allow variables to be used if they are not declared.

//Example 5
//output => error
/*
"use strict"
x = 5;
console.log(x)
*/

//Example 6
//output => 5
/*
"use strict"
x = 5;
console.log(x)
var x;
*/

/*
    Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your coding.
*/

/*
    One of the advantages of JavaScript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code.
*/

//Example 6
//output => My favourite team is Brazil
/*
function myFavouriteTeam(name) {
    console.log("My favourite team is " + name);
}
myFavouriteTeam("Brazil");
*/

//Example 7
//output => My favourite team is Brazil
/*
myFavouriteTeam("Brazil");
function myFavouriteTeam(name) {
    console.log("My favourite team is " + name);
}
*/

// Reference
// 1.https://www.w3schools.com/js/js_hoisting.asp
// 2.https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

///////////////////////////////////////// var VS let/const ////////////////////////////////////////

// new stuffs let and const

// 1.var is hoisted
// 2.let/const is not hoisted is not hoisted

//Example 8
//output => undefined
//Note var winner declared,function getWinner decclared,winner initialised,getWinner function called(again var winner is declared,since team is false,winner still is undefined,undefined is returned after end of function)
/*
var winner = 'Germany';
function getWinner(team) {
    if (team) {
        var winner = 'Argentina';
        return winner;
    }
    return winner;
}
console.log(getWinner(false)); 
*/

//Example 9
//output => Brazil
/*
let winner = 'Brazil';
function getWinner(team) {
    if (team) {
        let winner = 'Germany';
        return winner;
    }
    return winner;
}
console.log(getWinner(false)); 
*/

//3.use let for variables that will change their value over time, and const for variables which cannot be reassigned.

//4.let and const are block scoped. Therefore, referencing block-scoped identifiers before they are defined will produce a ReferenceError.

//Example 10
//output => // ReferenceError: x is not defined
/*
console.log(x); 
let x = 'hello';
*/

//Example 11
//output => undefined
/*
console.log(x); 
var x = 'hello';
*/

///////////////////////////////////// Block scoping /////////////////////////////////////

//Example 12
//output => // Reference Error
/*
{
    let winner = 'Portugal';
};
console.log(winner); 
*/

//Example 13
//output => Brazil
/*
{
    let winner = 'Brazil';
    console.log(winner); 
};
*/

/////////////////////////////////// functions are first class objects ////////////////////////////
// 1. Can be assigned to a variable or stored in an object
//Example 14
//output => Brazil will win world cup
/*
var whoWillWinWorldCup = function(team){
    console.log(team+" will win world cup")
};
whoWillWinWorldCup("Brazil");
*/

// 2. Can bestored in an object
//Example 15
//output => Brazil will win world cup
/*
var obj = {
    year:2018,
    whoWillWinWorldCup : function(team){
        console.log(team+" will win world cup")
    }
};
obj.whoWillWinWorldCup("Brazil");
*/

// 3. can be passed as arguments
//Example 16
//output => Brazil will win world cup
/*
function whoWillWinWorldCup(){
    console.log("Brazil will win world cup")
}
function anotherFunc(a){
    a();
}
anotherFunc(whoWillWinWorldCup);
*/

//4. can be returned from a function
//Example 17
//output => Brazil will win world cup
/*
function anotherFunc(){
    var whoWillWinWorldCup = function(){
        console.log("Brazil will win world cup")
    };
    return whoWillWinWorldCup;

}
anotherFunc()();
*/

//////////////////////////////////////// Arrow function ////////////////////////////////////