JS Demystified 01 — Variable Hoisting
A humble attempt to demystify tricky concepts in JavaScript
JS Demystified Series
Intro
Can you tell what would these console.log below prints out?
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
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 docsHoisting is JavaScript’s default behavior of moving declarations to the top.
— W3Schools
Often it’s explained as if the variable and function declarations are physically moved to the top of the code. But that’s not what is happening. In order to understand hoisting, you really need to understand different phases in which JavaScript engine goes through your code.
Note: 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.
JavaScript Engine
We can’t talk about JavaScript without JavaScript engine. It is a programme which reads and runs JavaScript code. It’s the core of what makes it possible to run your beautiful code in web browsers. For now, it’s enough to know that it does its job in two phases: the memory creation phase and the execution phase, and that our code won’t be executed until the second phase.
Browser Developer Tool
Enough talking! Let’s go through some examples of hoisting. If you want to quickly try out the examples as you go along, you can do so by opening the developer tool in your browser (shortcut for Chrome is alt + cmd + i) and go to the console panel.
Tips for running multi-line code in developer tool: shift + enter to go to the new line, then press enter when you want to execute them. Or simply copy and paste the whole code, then hit enter.
Variable Hoisting
Alright, here’s the first one.
Okay, I hear you. This is not actually an example of hoisting. The variable x is not declared anywhere in the code, so it will result in a big red ReferenceError, complaining that 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. It’s important to note that, in JavaScript, undefined is an actual value. So this is basically JavaScript engine interpreting 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 x to undefined? I certainly didn’t, did I?
This is a job of the JavaScript engine. During the memory creation phase, it recognises variable declarations as it reads the code, initialises them to undefined and puts them into memory to be used during the execution phase.
Let’s look at another example. What will the console.log output?
You might have guessed that it would print out 10, because you initialised x to 10. But the console.log outputs undefined. Why??
Here is the gotcha… initialisations are not hoisted.
During the memory creation phase, the JavaScript engine recognised the declaration of x (var x), automatically initialised x to undefined, and made it available. However, as the initialisation (= 10) didn’t get hoisted, value of x stayed as undefined when the execution reached console.log at line 1.
If we add another console.log at line 3, the second output will be 10, because by then x is reassigned to 10.
The example 4 is practically the same as running below.
var x
console.log(x)
x = 10
console.log(x)Wrap-up
Cool. So that is variable hoisting. We’ve covered a lot of stuff here — JavaScript engine, memory creation phase, execution phase, variable declaration, initialisation, reassignment etc...
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 post. Can you tell what would the two console.log outputs now?
I’ve put the answer at the end of this post. 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 post.
Thanks!
// answer to Example 5.x is undefined
x is undefined
x is 5
Got it?
Please post any feedback, questions, or requests for topics. I would also appreciate 👏 if you like the post, so others can find this too.
