What Is Hoisting in Javascript: Why and How to Avoid Using It

Anushree Singh
Aug 5, 2020 · 3 min read
Photo by Vojtech Ruzicka

Execution context, in simple words, is the environment that a function executes in. Every function in javascript has its own execution context. All execution contexts have a creation phase and an execution phase.

In the creation phase, the execution context exhibits a behavior called hoisting. Hoisting is the behavior of moving all the declarations at the top of the scope before code execution which happens in the execution phase. The javascript engine goes through the code and looks for all “var”s and “function”s and declares them, initializing to undefined, before actually starting to execute the statements. In other words, it assigns memory for all vars and functions in the code before executing the code statements.

For eg., the below code snippet will print out undefined.

console.log(a);
var a = 10

But most of the time, hoisting leads to confusing code which is unreadable and very difficult to make sense of. Take the following code snippet for an example:

var animal = "lion";var favoriteAnimal = function () {
console.log("Original favourite animal: " + animal);
var animal = "giraffe";
console.log("New favourite animal: " + animal);
};
favoriteAnimal()

You would expect the output to be the following:

Original favourite animal: lion
New favourite animal: giraffe

However, hoisting in an execution environment happens independently of other execution environments. Since every function has it’s own execution environment, for favoriteAnimal(), hoisting declares animal as undefined and then starts executing the function statements. As a result, the actual output looks like below:

Original favourite animal: undefined
New favourite animal: giraffe

Interestingly, let and const are hoisted too. But the difference is that they are not initialized, unlike var which is initialized to undefined. Hence, let or const should be used instead of var to avoid hoisting side effects as shown in the below snippet. This is because it would throw an exception since it would not allow animal to be used before its declaration.

let animal = "lion";var favoriteAnimal = function () {
console.log("Original favourite animal: " + animal);
let animal = "giraffe";
console.log("New favourite animal: " + animal);
};
favoriteAnimal()

Hoisting makes code unpredictable and difficult to understand. Hence, there are arguments against using hoisting in our codebase wherever possible.

Some ways to avoid hoisting are:

  1. Use let or const — As explained above, using let or const instead of var would throw an exception and not let the program run, hence helping catch the issue earlier.

An example of a function declaration:

console.log(printRandom());function printRandom() {
return "Print Random";
}

The above function declaration will be hoisted and will print out Print Random. However, a function expression like the below snippet will not be hoisted and will throw an error:

console.log(printRandom());var printRandom = function () {
return "Print Random";
}

Hoisting is a weird concept in Javascript. It makes code unreadable and unpredictable. Hence, we should refrain from using it whenever possible by using the above methods.

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Anushree Singh

Written by

Software Engineer at AirAsia

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Anushree Singh

Written by

Software Engineer at AirAsia

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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