Understanding Hoisting in Javascript

Ever wondered what is hoisting and how it works in javascript? Let me help you with this and learn about it together. Let’s start!

Didn’t get it completely? No problem, Let me explain.

In simple words hoisting allows us to safely use variables/functions in code before their declaration, by moving them at top of their scope but it’s not recommended to use them before their declarations as it may lead to errors.

Hoisting is done in the creation phase of Global execution context.

In this article, we will learn about all types of hoisting one by one.

An important thing to understand about variable hoisting is that javascript only hoist declarations, not initialization. Variables only get initialized when that specific line is executed until that variable has its default initialization as undefined (only for variables declared using var otherwise uninitialized)

Let’s figure out how hoisting works when a variable is declared using var with the help of a code block.

Let me explain what will happen when this code block gets executed.

Before execution of code what interpreter does is scan the code and looks for all the variable declarations available in the file and move them at the top of their scope. In this case interpreter will move line#2 on top of global scope as we are declaring it in main tree.

This is how javascript will interpret it due to hoisting:

In line#1 x is declared, in line#2 it will logundefined in console because x is declared using var that’s why it has undefined as its default initialization, in line#3 x is initialized with its actual value 2 and in line#4 it will be logged in console by its actual value 4 .

Same thing will happen if we declare and initialize a variable at the same time.

Note: In case we completely forgot to declare a variable then it will throwReferenceError exception.

Variables declared using let and const are also hoisted but don’t get initialized with a default value that’s why accessing these variables before declaration will cause ReferenceError exception as the variable is uninitialized.

Hoisting also allows us to use functions before their declarations, let’s understand this with an example

Without hoisting we have to take care of the order of usage and declaration, thanks to hoisting we can ignore its order.

Let’s see in another example how hoisting works with function expressions.

It’s time to remind a point we discussed earlier in this article: javascript hoist only declaration, not initialization.

Let’s see what happens when interpreter scans the code before execution:

While scanning when it comes to line#2 it will see a declaration and move it to the top of the scope and in this case it wouldn’t be the whole line moving on top it will just move the declaration part let getRectArea; that’s it. Just to make it clear function assigning to getRectArea variable is part of the initialization process.

When line#1 is executed interpreter will find a function call although it isn’t aware of any function declaration so it will result in an exception.

Function and class expression works on almost same pattern so we can say that both function and class expressions are not hoisted in javascript.

In javascript we can declare a class by using class keyword along with the name of the class.

This method is called class declaration.

Classes defined using class declaration are hoisted and interpreter has their references before actual execution happen. But they don’t have default initialization so any code block using a class before its initialization will result in an exception ReferenceError .

I’d say in javascript the only thing which matters is the order in which a code block is executed not the order in which it is written.

We can use variables(only declared using var ) and functions before their declaration but it is not a very good approach so try to declare all your variables and then access them.

Related posts:

Many See Medical Cannabis Regulations as a Step Towards Full Legalization — LPC On January 12, 2021, Mexio’s President Andres Manuel Lopez Obrador signed new medical cannabis regulations for the…