Understanding Hoisting in Javascript

Hoisting means moving something up like with a rope like flag hoisting. So let’s see how javascript uses hoisting.

Javascript moves the variables and function declarations to the top of the scope regardless the scope is local or global. That’s hoisting in context of javascript.

So how do we know if the variable is declared or not. We can know from the value of it. If the variable is declared, but not initialised, the default value is undefined. If the variable is not even declared, it throws ReferenceError.

Let’s check this behaviour.

So here we can see even if we have not declared the variable yet, it is not showing reference error. So the variable is declared, but not assigned. The value is initialized to undefined.

Behind the scene

Javascript moves the variable declaration to the top of the scope.

Let’s check what happens for functions.

Here we can see, before declaring the function, if we try printing the function, it is of type function. So, the function declaration is also moved to the top of the scope. It does not throw reference error.

Behind the scene:

We can see, javascript moves the function declaration to the top of the scope.

What if we declare the functions as expressions

Here we can see, if we define the functions as expressions, type of the function is undefined instead of function. Because, javascript treats them as variables.

Behind the scene:

We can see the variable declarations are moved to top of the scope, later it assigns the value to the function, that’s why type is undefined when we print the expression first.

Gets interesting when we mix them together:

We can see in the first function, even if we define a function with name test, value of test points to 12 only. It’s happening due to the order javascript follows for hoisting.

The order is

• Variable declaration.
• Function declaration.
• Variable assignment.

Behind the scene

So far so good!

Let’s check how the hoisting behaves in block scope

ES6 introduced block scope to javascript. let is block scoped.

Let’s check how hoisting behaves in block scope.

We can see let and const are not hoisted. Const should never be assigned. So it can not be assigned to undefined then reassigned to something else. We should never try using them before initialization.

Let’s check what happens for classes

So ES6 classes are not hoisted. What if we define classes as functions.

This syntax works. So if we define the classes as functions, they are hoisted.

There is some argument let, const and class are partially hoisted. Like the variables are defined, but not assigned to any value. They behave as good as not hoisted.

We should always consider define variables at the top of the scope. Another way to enforce it is to use strict mode. It will ensure we are not using variables or functions before initialization.

We are at the end of the article! Thanks for reading. Hope you found it interesting.