Introduction:
This article is in continuation of my previous article: Javascript Variable Scopes
Hoisting is a tricky and very important topic in javascript. Lot of questions asked in javascript interviews are based on hoisting.
In this article, we will go through variable hoisting in javascript and see how it affects the desired output.
So, let's not wait further and dive into concept of hoisting.
What is Variable Hoisting?
Hoisting is a JavaScript mechanism where variables declarations are moved to the top of their scope before code execution.
This means when javascript engine compiles your code, all variable declarations using var
are lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made.
Basically, it gives us an advantage that no matter where variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. It allows us to use variables before it is declared in our code.
The following example declares variable studentName
and assign value John
to it:
console.log(studentName); // usage
var studentName = 'John'; //declaration & assignment
What will be the output of above code?
Uncaught ReferenceError: name is not defined
John
undefined
It turns out that third option is correct answer.
Explanation:
In the above code, we tried to console the variable studentName
which was declared and assigned later then using it, the compiler gives us undefined
which we didn’t expected as we should have got ReferenceError as we were trying to use studentName
variable even before declaring it.
But the interpreter sees this differently, the above code is seen like this:
//how interpreter sees the above code
var studentName;
console.log(studentName); // undefined
studentName = 'John';
Things to note here:
- Variable declaration
studentName
is moved to top. - Only thing that gets moved to the top is the "variable declarations", not the actual value given to the variable. Therefore, output is
undefined
instead ofJohn
.
ES6: let
& const
keywords. Are these also hoisted?
Variables declared with let
and const
are also hoisted. Where they differ from other declarations in the hoisting process, is in their initialisation.
Let's look at an example:
console.log(studentName); // ReferenceError: studentName is not defined
let studentName = 'John';
Why this error?
Variables declared with let, const, and class are hoisted but remain uninitialised. These variable declarations only become initialised when they are evaluated during runtime. The time between these variables being declared and being evaluated is referred to as the temporal dead zone. If you try to access these variables within this dead zone, you will get the reference error above.
- JavaScript runs its compilation phase and sees
let studentName
, hoists that variable, but does not initialise it. - Next, in the execution phase,
console.log()
is invoked and passed the argumentstudentName
. - Because the variable has not been initialised, it has not been assigned a value, and thus the reference error is returned stating that
studentName
is not defined.
console.log(studentName); // ReferenceError: studentName is not defined
const studentName = 'John';
Much like the let
keyword, using const
before declaration throws a Reference error.
Hence, to err on the side of caution, we should declare then assign our variables to a value before using them.
Summary:
- JavaScript hoisting occurs during the creation phase of the execution context that moves the variable declarations to the top of the script.
- While using
var
, trying to use undeclared variables will lead to the variable being assigned a value of undefined upon hoisting. - While using es6
let
andconst
, using undeclared variables will lead to aReference Error
because the variable remains uninitialised at execution. - We should make it a habit to declare and initialise JavaScript variables before use.
That’s it for now. Thank you for taking time to read this article. Do provide feedback and comments. I’ll cover more topics like difference between var, let and const in upcoming posts. Keep following!