Open Source Your Knowledge, Become a Contributor
Technology knowledge has to be shared and made accessible for free. Join the movement.
Test your knowledge
Can you tell what would these three
console.log below prints out?
console.log('x is', x); var x; console.log('x is', x); x = 5; console.log('x is', x);
If not, stay with me, and I’ll try my best to demystify hoisting. And even if you know what they print out, if you can’t explain the why, stick around. You might learn something new!
Hoisting is notoriously one of the most confusing aspects for those who are new to the language, or even with some experience — you’ve heard of them, you know it exists, you know it happens… but you don’t really know what exactly is happening behind the scene.
The source of the confusion lies within often misleading descriptions:
- … variable declaration is moved to the top of the function or global code. — MDN web docs
let/const/class declarations behave differently. I think it’s best to
understand hoisting with
var/function first, so I will keep them for another time.
In this post, I will start off by explaining variable hoisting.
Enough talking! Let’s go through some examples of hoisting.
Here’s the first one.
Okay, I hear you. This is not actually an example of hoisting. The variable
not declared anywhere in the code, so it will result in a big red
x is not defined — fair enough!
What about this one?
At the first glance, you may think that it’s a lot like the first example. However,
this code doesn’t throw an error. It executes and prints out a value of
undefined is an actual value.
var x = undefined, just like
var x = 5 or
var x = ‘string’.
The key here is that
x is defined and available before its declaration — yes,
this is a legitimate example of hoisting. Hence, the example 2 is practically same as:
var x; console.log(x);
But who sets the value of
undefined? I certainly didn’t, did I?
variable declarations as it reads the code, initialises them to
puts them into memory to be used during the execution phase.
Let’s look at another example. What will the
You might have guessed that it would print out
10, because you initialised
Here is the gotcha… initialisations are not hoisted.
var x), automatically initialised
undefined, and made it available. However,
as the initialisation (
= 10) didn’t get hoisted, value of
x stayed as
when the execution reached
console.log at line 3.
If we add another
console.log at line 5, the second output will be
10, because by
then the reassignment of
10 has been executed.
The example 4 is practically the same as running below.
var x; console.log(x); x = 10; console.log(x);
Let’s test our understanding of variable hoisting, before moving onto function hoisting.
Here’s a piece of code that I’ve put in the beginning of this article. Can you tell what would
console.log outputs now?
If you got this right, you understood variable hoisting. Don’t worry if you didn’t get it right, understanding comes with practice. Explore more by creating your own examples, until it becomes familiar.
I will go through function hoisting in the next section.