In JavaScript, all the variables declared with var, let, and const keywords are hoisted to the top. However, many think variables using let and const keywords are not hoisted because it throws an error if trying to access those variables(declared with let and const) before initialization. In this blog, I'll try to demonstrate the exact reason for the such different behavior of hoisting.
Hoisting in JavaScript
Before we dive into the differences in hoisting behavior, let's first understand Hoisting. when JavaScript compiles the 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. This is what we mean by hoisting.
console.log(a) // undefined
var a;
a = 'Hello';
In the above example, if we try to access the a variable it will give us undefined. Because the JavaScript compiler first read the variables and functions declaration and create space for them.
Note: The concept of hosting is not a literal process (ie, the declarations themselves do not move to the top of the file — it is simply a process of the JavaScript compiler reading them first in order to create space in memory for them).
But the problem arises when we try to access a variable (declared with let or const keywords) before initialization. In that case, it'll throw a reference error.
console.log(b) // Uncaught ReferenceError: b is not defined
let b;
b = 'Hello';
console.log(c) // Uncaught ReferenceError: c is not defined
const c = 'Hello';
Here many programmers get confused and think that variable using let and const keywords doesn't hoist. However, in reality, those variables with let and const also hoist. MDN Reference
But, why we can't access before initialization like var variable?
Because of Temporal Dead Zone
Variables (declared with var) are hoisted with a default initialization which is undefined. That’s why if we try to access a variable (with the var keyword), it’ll not throw an error. Rather, it’ll give us undefined.
On the other hand, variables using (let and const) also do hoist but without a default initialization. That’s why accessing before initialization a variable (with let and const) will throw a reference error. It’s also known as the temporal dead zone where compilers know its existence but can’t access it because it’s uninitialized.
var a; // Compilers Read and hoist like: var a = undefined
let b; // Compilers Read and hoist like: var b
If you find this blog helpful, you can follow me on LinkedIn and GitHub. Also, if you have any feedback, please let me know in the comment section below.
Top comments (1)
This is the main crux...