What is hoisting

When a JavaScript code runs it creates an execution context. which helps in determining what code is currently running and helps in allocating memory for every function and variable declaration.

The mechanism of allocating memory for the functions and variable declarations within an Execution Context is called Hoisting.

var Keyword

the var keyword is hoisted in JavaScript let's look through the example.

console.log(a)

var a = 10;

conole.log(a)

// output : undefined
                 10

So in JS Execution context is divided into two phases

1) Creation Phase / Memory allocation phase

2) Execution phase

In the creation phase memory is being allocated to variables and functions

So var is assigned a value of undefined until it is initialized with a value of 10 so the first console.log prints undefined.

Function Declaration

Functions declarations are also hoisted. Hoisting allows you to use Functions before the declaration.

Take a look at the example below.

myName();

function myName(){
    console.log("prathmesh")
}

// Output : prathmesh

so here the whole function is being stored in the memory allocation phase and we can call that function even before the declaration.

Function Expression

Function expressions, however, are not hoisted.

hello(); //Output: "TypeError: expression is not a function

var hello= function() {
  console.log("will hello get printed");
};

Function expression works the same as var, as we are assigning function to a variable. so in the memory allocation phase, it is considered a variable and assigned undefined

The let and Const keywords

In JavaScript, all variables defined with the let or const will be hoisted to the top, but will not be initialized. That means the variable cannot be used until it has been declared. They will be in Temporal Dead Zone

So what is Temporal Dead Zone? Let's see through the example

Let and const are also hoisted but they behave differently than var

console.log(a)    // Start of Temporal dead zone


let a = 10;    // end of temporal dead zone

// output:   ReferenceError: a is not defined

A temporal dead zone (TDZ) is the area of a block where a variable is inaccessible until the moment the computer completely initializes it with a value

The let and const variables exist in the TDZ from the start of their enclosing scope until they are initialized as a value.

So we get a Reference Error if we try to access the variable declared with let and const before initialization.

Class Hoisting

classed defined with the class keyword are hoisted. But unlike functions, we cannot use classes before they are declared if we do so a Reference Error will be thrown.

const name = new name(); // ReferenceError

class name{}

Examples

let's look at some of the examples to understand better

console.log(y);
y = 1;
-------------------
console.log(y);
var y = 2;
-------------------
y = 3;
console.log(y);
var y;

Guess the output?

solution :

console.log(y);
y = 1;                    // Reference Error
-------------------
console.log(y);
var y = 2;         // undefined
-------------------
y = 3;
console.log(y);      // 3
var y;

Can you guess the output?
Comment down below

a()
function a(){
    console.log("a")
}
b();
var b =function(){
    console.log("b")
}

Let's go through the solution :

here output will be: a
TypeError of b is not a function

here as we know we can call functions before they are declared that's because of hoisting during memory allocation whole function is being stored in memory.

But in the case of function expression, we are assigning a function to a variable that will be stored as undefined in the memory allocation stage. so it compiler will throw an error.

Conclusion

Let’s summarise what we’ve learned so far:

1)In var, trying to use undeclared variables will lead to the variable being assigned a value of undefined upon hoisting. 2) In the case of let and const, using undeclared variables will lead to a Reference Error because the variable remains uninitialized at execution.

Therefore, We should make it a habit to declare and initialize JavaScript variables before use. Using strict mode in JavaScript es5 can help expose undeclared variables.

I hoped this blog helped you to understand hoisting in JS If you have any doubt or suggestions feel free to comment.