So, let's not wait further and dive into concept of hoisting.
What is Variable Hoisting?
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
It turns out that third option is correct answer.
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
studentNameis 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
const keywords. Are these also hoisted?
Variables declared with
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.
let studentName, hoists that variable, but does not initialise it.
- Next, in the execution phase,
console.log()is invoked and passed the argument
- Because the variable has not been initialised, it has not been assigned a value, and thus the reference error is returned stating that
studentNameis 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.
- While using
var, trying to use undeclared variables will lead to the variable being assigned a value of undefined upon hoisting.
- While using es6
const, using undeclared variables will lead to a
Reference Errorbecause the variable remains uninitialised at execution.
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!