JavaScript Hoisting

Introduction

JavaScript is a flexible and powerful language, but it also has some unique behaviors that can confuse beginners. One such concept is hoisting.

Many developers are surprised when JavaScript allows them to use variables or functions before they are declared. This behavior is not magic—it is due to hoisting.

Understanding hoisting is crucial because it helps you avoid bugs, write predictable code, and perform better in interviews. In this article, we will explore what hoisting is, how it works, and how to use it correctly.

What is JavaScript Hoisting?

Hoisting is JavaScript’s default behavior of moving declarations (not initializations) to the top of their scope during the compilation phase.

In simple terms:

Hoisting = JavaScript moves declarations to the top before execution

What is the use of JavaScript Hoisting

There are many benefits of JavaScript Hoisting.

1. Avoid Bugs

Prevents unexpected, undefined values.

2. Better Debugging

Easier to trace issues in code.

3. Predictable Code Behavior

Helps you understand how JavaScript executes code.

Example:

I will show you many examples based on different-2 scanerio.

Example 1: Variable Hoisting with var

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

Output:

Internally interpreted of the above code:

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

Example 2: Variable Hoisting with let

console.log(a); // ReferenceError
let a = 10;

Output:

Note:  let is hoisted but kept in the Temporal Dead Zone (TDZ).

Example 3: Variable Hoisting with const

console.log(a); // ReferenceError
const a = 10;

Output:

Note:  const is hoisted but kept in the Temporal Dead Zone (TDZ).

Example 4: Function Hoisting

greet();

function greet() {
 console.log("Hello");
}

Output:

Note: Functions are fully hoisted.

Example 5: Function Expression (Not Hoisted Fully)

greet(); // Error

var greet = function () {
 console.log("Hello");
};

Output:

Real-Life Example: Login System Bug

In this example, you will see a login system bug.

console.log(userName);
var userName = "John";

Output:

Correct Approach:

var userName = "John";
console.log(userName);

Types of Hoisting

There are two types of Hoisting.

1. Variable Hoisting

var is hoisted and initialized as undefined.

let and const are hoisted but not initialized (TDZ).

2. Function Hoisting

1. Function declarations are fully hoisted.

2. Function expressions are partially hoisted.

What is Temporal Dead Zone (TDZ)?

The Temporal Dead Zone is the time between variable declaration and initialization, where accessing the variable causes an error.

console.log(a); // Error
let a = 5;

Note:  TDZ prevents unpredictable behavior.

Common Mistakes

There are some common mistakes.

1. Using Variables Before Declaration

console.log(x); // Output: undefined
var x = 10;

2. Confusing var with let

if (true) {
 var x = 5;
}
console.log(x); // Output: 5

Correct way

Use let instead of var.

if (true) {
 let x = 5;
}
console.log(x); // Output: Error: x is not defined

3. Redeclaration variable Issues

var x = 10;
var x = 20; // Allowed

Note: You can redeclare a variable with var, and the value of x will be overwritten with 20.

let x = 10;
let x = 20; // Error

Note: You can not redeclare a variable when using let; otherwise, it will show an error.

4. Function Expression Confusion

sayHi(); // Error
var sayHi = function () {};

Interview Questions

JavaScript Hoisting – Objective Questions (MCQs)

Conclusion

JavaScript hoisting is a fundamental concept that explains how variables and functions are processed before execution. While it can be confusing at first, mastering hoisting will make you a better JavaScript developer.