Understand Hoisting in JavaScript once and for all

What is Hoisting?

Hoisting is a JavaScript behavior in which a function or variable can be used before declaring it. JavaScript moves the function and variable declarations to the top of their scope just before executing it, Due to which we can access them even before its declarations.
Let's understand it by going through some examples.

Variable Declarations:

When using var keyword :

Below is an example where we have declared a counter variable and set its value to 1. However we are trying to console.log it before its declaration.

console.log(counter); // undefined
var counter = 1;

On executing we get the counter value as undefined. This is because JavaScript only hoists declarations.
JavaScript hoists the declaration of counter and initializes its value as undefined. Therefore, the code looks something like this in the execution phase.

var counter;
console.log(counter); // undefined
counter = 1;

When using let or const keyword :

When using let or const keywords, JavaScript hoists the declarations to the top but it will not be initialized.

console.log(counter);
let counter = 1;

Therefore when we try to console.log counter before initializing it, we will get ReferenceError

ReferenceError: Cannot access 'counter' before initialization

The same thing happens with the const keyword.

Function Declarations:

Like Variables, JavaScript also hoists function declarations. It means that it moves the function declarations to the top of the script.

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

function add(a, b){
   return a + b;
}

Now the above example won't result in error even though we are calling the add() function before defining it.
The code looks something like this during execution:

function add(a, b){
   return a + b;
}

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

When using an Arrow Function or Anonymous Function:

In the below example we change add from a regular function to an anonymous function.

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

var add = function(x,y) {
   return a + b;
}

Now, when JavaScript hoists the declaration of add variable it initializes it as undefined. Therefore, we get an error like this

TypeError: add is not a function

Now, You might be wondering what will happen if we use let instead of var.

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

let add = function(x,y) {
   return a + b;
}

We will get an error again but this time the error message will be different as JavaScript will hoist the declaration of add but it will not be initialized.

Uncaught ReferenceError: greet is not defined

The same thing will happen if we use an Arrow Function because Arrow functions are nothing but syntactic sugar for defining function expressions.

Some Tips to avoid Hoisting:

• Declaring your variables at the top is always a good rule.
• You can also use Strict Mode.
• In the case of variables, it is better to use let than var.

Hoisting in JavaScript is an important concept to understand as it might lead to bugs and unexpected behavior in your code.
That's it, I hope you learnt a lot from this blog. If you enjoyed this post, I’d be very grateful if you’d share it. Comment below if you have any doubts or questions.

Thank you for Reading!🙂

Comments

[Jon Randy 🎖️]

It's important to note that nothing is actually moved to the top. That's just a convenient mental model to understand the consequences of what is actually going on

[Amarjit Singh]

Yes Jon, Nothing is actually moved to the top. The variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code. During Execution Phase, variable and function declarations are executed first, so they will be in reserved memory.