ES6 Variables - 4

var is hoisted.

console.log(pizza);

var pizza=“macaroni”;// produces undefined

const and let are not hoisted.

console.log(pizza);

const pizza=“macaroni”;// undeclared variable error

*var is hoisted, let and const are not.
*Everytime a variable is accessed inside an execution context, if it is not there, its outer lexical value is used.
__

Extra: The Scope Chain 

1.Accessing a global variable locally
var a=10;
function b(){
console.log(a);
}
b();
//prints 10.
//because a exists globally

2.Accessing a local variable globally
function c(){var d=10;}
undefined
d;
//undeclared error.
//this is because function c's variable environment does not exist at a global level

3.Accessing a variable of lexical parent
function p(){var g=30; function q(){console.log(g)}; q();}
p(); //prints 30
//because g exists in the outer environment of function q, which is function p

4.Accessing a variable of lexical grandparent
function p(){var g=30; function q(){function r(){console.log(g);} r();}q();}
p();//prints 30
//because g is 30 in r's grandparent p and r's parent q does not have a value for g

5.Accessing a variable of parent despite having a grandparent 
function p(){var g=30; function q(){g=50;function r(){console.log(g);} r();}q();}
p();//prints 50
//because here, r's parent q has a value for g

If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable given that the function is run and the assignment has been executed..

function a(){b=20;}
a(); //Gives undeclared error if a() is not run.
console.log(b);//prints 20

The Order of Execution:
-Whenever a function is come across, dive into its execution stack
-Every execution context has its own variable environment
-Each child can access its lexical parents' or lexical grandparents' or lexical great-grandparents' and so on's variables if they are not overwritten.
All of the above runs in the javascript engine
-But asynchronous events are handled by a different component of the browser
-When an event is fired, it get's placed on the event queue, which is attended to by the JS engine after its execution stack and global stack are empty.
-By FIFO service, each event is taken and an execution context for that function is created and executed..

function a(){
//I tried using setTimeout here, but setTimeout is an event not a pure function.
  var ms=3000+new Date().getTime();
  while (new Date<ms){}
  console.log("I made you wait 3 seconds. Ha ha");
}
document.addEventListener('click',function(){console.log("I was clicked!");});
a();
//Output:
//I made you wait 3 seconds. Ha ha
//I was clicked!

*Dive into execution stacks first
*Each stack has its own variable environment (inherits from lexical parents, variables are hoisted within the variable environments)
*Asynchronous events are executed in FIFO after pure JS execution stack is clear