• Hoisting : It is concept in which we can access values of variables and functions even before they are initialised.

Let's understand with an example bellow:

In normal javascript code behaves as we aspected.

var num = 100;

function greeting(){
 console.log(" Hi, this is shafiq ");
}
greeting(); // output:  Hi, this is shafiq
console.log(num); // output: 100

Now let's look how exactly hoisting works in javascript.

• what will be the out put if we call the function and log the variable before they are getting initialised

greeting(); // output:  Hi, this is shafiq
console.log(num); // output: undefined
var num = 100;
function greeting(){
 console.log(" Hi, this is shafiq ");
}

• Some interesting thing happened in output of the above code right, this special phenomena called as hoisting.

Now let's understand what exactly happened here

• In javascript whenever code runs a Global Execution Context (GEC) will create. and it contains two phases
  1. Memory creation phase.
  2. Code execution phase.
• Hoisting happens in the first phase, that is memory creation phase.
  • In memory creation phase there is an object called Variable Object (VO).

• Variable Object (VO) : it's a object like container that contains variables and functions declarations defined within that execution context.

• In Global Execution Context (GEC), the variables declared with var keyword get's property inside the Variable Object (VO) pointing to that variable and set's value of undefined.

Note : That's the reason why we get variable out put as undefined.

• Also, in terms of function invocation, functions also get's property inside VO pointing to that function, and stores in the memory. that's the reason we can access the function before they are initialised.

  • Are Arrow Functions and Function Expressions also get access.

// Arrow function
greeting() // output: greet is not a function
var greeting = () =>{
 console.log("Hello")
}

// Function expression
greeting() // output: greet is not a function
var greeting = function() {
 console.log("Hello")
}

Note: Because both Arrow Function and Function Expression treated as variables declared with var keyword and get initialized by undefined value. hence the output is "greet is not a function".

Are variables declared with let and const hoisted....?

Yes, variables declared with let and const are hoisted. Where they differ from other declarations in the hoisting process is in their initialization.

• During creation phase variable declared with var keyword get's initialized with undefined value.

console.log(name) // output: undefined
var name = "shafiq";

• variables declared with let and const keywords are also get hoisted but remain uninitialized.

console.log(name) // output: Uncaught ReferenceError: name is not defined
let name = "shafiq";

• These variable declarations only become initialized when they are evaluated during runtime. The time between these variables being declared and being evaluated is referred to as the temporal dead zone. If you try to access these variables within this dead zone, you will get the reference error above.