JavaScript Hoisting Explained

In JavaScript, hoisting gives you the permission to use functions and variables before they’re declared. In this article, we’ll discuss hoisting and how it works.

What is hoisting?

We can lift a variable and give it a space in memory, this process is called JavaScript Hoisting.

How is JavaScript code interpreted?

At the time of execution of a piece of Javascript code, the javascript engine generates a global execution context, which has two stages one is the compilation and another is execution.

When we compile a javascript code, the first Javascript detects all the variables and functions including var, function, let, const, and class, then allocates a unique space in memory for each declared variable it finds.

Here are two types of hoisting: Variable hoisting, Function hoisting.

Variable Hoisting:

Variable hoisting means the javascript engine detects the variable declaration and moves to the top of the script for example,

Example 1:

console.log(ig); // undefined
var ig = 10;

Here the first line of code doesn’t show an error because the javascript engine already detects all the variables and functions in the compilation phase and all the variables are hoisted.

Example 2:

var ig;
 
console.log(ig); // undefined
 
ig = 10;

In the second example, the output will be undefined because in the compilation phase the variable will be stored in the memory. Still, the value of the variable will not be stored in the memory. So it initializes its value as undefined.

Example 3:

console.log(str);
str = "this is indgeek"; // ReferenceError: str is not defined

Here it will show an error because in this case, we have not declared str using var, therefor the variable is stored in the memory during the compilation phase, which is why the variable is not hoisted.

Also Read: Send Emails with Vanilla JavaScript

Function Hoisting:

In this case, javascript detects the functions and allocates space in memory.

Example 1:

let result = sum(3, 4);
result; // 7
 
function sum(a, b) {
  return a + b;
}

Here javascript engine hoists the function declaration during the compilation. And then the engine creates an object of the function type and function reference that refers to the function object.

let result = sum (3,7); //ReferenceError: sum is not a function
 
var sum = function (3,4){
 return a + b;
}

Here sum is detected as a variable and the engine initialized its value to undefined. But the sum variable is assigned to a function only during the execution phase. That is why this code will return an error.

Also Read: Introduction to JavaScript Promises

let, const, and class:

The variables which are declared with let, const, and class are hoisted but they are having a different hoisting (opens in a new tab) prosses during the compilation. The variable declared with var is hoisted and set to undefined but the variable declared with let, const, and class gets hoisted but remains uninitialized.

console.log(str); // str in a temporal dead zone
// ReferenceError: Cannot access 'str' before initialization
let str = "T_T";
 
console.log(num); // num in a temporal dead zone
// ReferenceError: Cannot access 'num ' before initialization
const num = 4.54345;