Do you really know about Hoisting?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. All variable and function declarations are hoisted to the top of their scope

Image for post
Image for post

However, in contrast, undeclared variables do not exist until code assigning them is executed. Therefore, assigning a value to an undeclared variable implicitly creates it as a global variable when the assignment is executed. This means that all undeclared variables are global variables.

Difference between var, let and const in terms of hoisting

All the types var, let and const get hoisted but there is a difference in the default value with which they get hoisted like in var they get hoisted with undefined value but in case of let and const they don't initialize with any value.

It will give undefined because only the declaration is hoisted not the initialization. So it will be interpreted as :

The same behavior of var is in functional scope also.

To avoid this we can declare and define the variable before using it

As we know in case of let the default value is not there so we cannot access the variable before the engine evaluates its value.

So the engine binds the value to the variable where it is actually declared. So if we write code like this

In this case, undefined is printed because as in line 1 we are declaring the variable So we are binding the variable with the value and default value is undefined.

In the case of const. Much like the let keyword, instead of silently exiting with an undefined, the interpreter saves us by explicitly throwing a Reference error.

We have to declare and define the const variable together. we cannot separately so that.

Hoisting Functions

A function can declassify into 2 parts in terms of hoisting :

Function declaration Function expression

Function declaration

In a function declaration , the function is defined without a new variable like

In case of function declaration whole function gets hoisted for example :

Functional expression

In this, a function is assigned to a new variable

In this case, only the variable is hoisted not the whole function

printFn is initialized with undefined, it's not a function when we are invoking it that's why we get this error.

Order of precedence

Function declarations take precedence over variable declarations. Variable assignments take precedence over function declarations

Hoisting Classes

Hoisting classes are the same as function hoisting. It also has 2 types

Class declarations

Class expressions

Class declarations

Much like their function counterparts, JavaScript class declarations are hoisted. However, they remain uninitialized until evaluation. This effectively means that you have to declare a class before you can use it.

So we have to declare and define class on top of code where we are using it


Much like their function counterparts, class expressions are not hoisted.

Written by

Full stack developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store