Hoisting is a very unique feature of JavaScript where you can use variables and functions even before they are declared. In most other programming languages calling a variable or function before declaration will result in error.
Variable hoisting.
Variable hoisting with var
console.log(x); //The output is undefined
var x=17;
You don't get an error as output. Instead, you get undefined.
Here the memory has been allocated to the variable but it is just not initialized yet, but you can call, the variable without any error. This is variable hoisting.
Basically, JavaScript engine creates a global execution context which has mainly two phases.
Memory creation
Execution
So at first, JavaScript allocates memory to all the variables and functions in the program. Before a variable is assigned a value or is initialized, the default value will be "undefined".
var a; //memory allocated
console.log(a); // undefined
a = 17; //var intialised
console.log(a); // Output is 17
Here in the second line, we get "undefined" because variable a is hoisted and is given a default value of undefined. The var a is initialized in the third line and hence we get the output as 17 when the fourth line is executed. But if we console.log an undeclared variable it throws a Reference Error( not defined) because declaration is not hoisted.
console.log(b); // ReferenceError: b is not defined
Variable hoisting with let and const
Variables declared with let and const are hoisted but not initialized with a default value. Accessing a let or const variable before it's declared will result in a Reference error.
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;
console.log(b); //ReferenceError: Cannot access 'b' before initialization
const b = 10;
. Since b is declared with const, it cannot be reassigned a new value after it is declared.
The reason why ReferenceError occurs is because of Temporal Dead Zone.
What is Temporal Dead Zone?
Temporal Dead Zone is a zone where variables are inaccessible before their initialization. It's a region of scope where a variable is declared but cannot be accessed or used. If we try to access such variables we get a ReferenceError. Basically each and every let and const variable undergo Temporal Dead Zone. TDZ starts at the beginning of the variable's enclosing scope and ends when it is declared.
let a = 10;
console.log(a); //10
{
//var b is going to have a TDZ
let a =10;
console.log(a); // 10
console.log(b); //ReferenceError: Cannot access 'b' before initialization 'b' is in TDZ
let b = 20; // 'b' is now out of TDZ
console.log(b); //20
}
Function hoisting
In JavaScript functions are also hoisted. This simply means we can call a function even before it's declared.
greet(); // Hey, welcome to my blog
function greet(){
console.log("Hey, welcome to my blog");
}
In the above example, the greet() function prints "Hey, welcome to my blog" , even though it is called before the function declaration.
One important to thing to notice is that expressions are not hoisted. i.e. if you assign a function to a var , it is not hoisted. When we call the variable that the function expression was assigned to, we will get a TypeError or ReferenceError, depending on the variable's scope.
greet(); //TypeError: greet is not a function
var greet = function() {
console.log("Hey, welcome to my blog");
}
greet(); //ReferenceError: Cannot access 'greet' before initialization
let greet = function(){
console.log("Hey, welcome to my blog");
}
greet(); //ReferenceError: Cannot access 'greet' before initialization
const greet = function(){
console.log("Hey, welcome to my blog");
}
Similarly, arrow functions are also not hoisted in JavaScript.
greet(); //TypeError: greet is not a function
var greet = () => {
console.log('Welcome to my blog');
}
This is because the arrow functions behaves like any other variable. It's default value before intialization will be undefined, which means it has been allocated with some memory.
Hope this article helped you understand hoisting in JavaScript. Thank You.