Understanding variable hoisting in JavaScript

SrijanMar 07, 2025 - JavaScript

Introduction

JavaScript is a dynamic programming language with unique behaviors that developers must understand to write efficient, error-free code. One such behavior is variable hoisting.

Variable hoisting refers to how JavaScript moves variable declarations to the top of their scope before code execution. Understanding hoisting can help prevent common mistakes and improve code readability.

Table of Contents

• Declaration and Initialization
• What is variable hoisting?
• How Hoisting Works with Variables
  • Hoisting with var
  • Hoisting with let and const
    • Temporal Dead Zone (TDZ)
• Best practices to avoid hoisting-related issues

Declaration and Initialization

Before understanding hoisting, it is important to know the difference between declaration and initialization in JavaScript.

• Declaration is when a variable is declared using var, let, or const.

• Initialization is when a value is assigned to a variable.

1// Declaration
2var x;
3
4// Initialization
5x = 10;
6
7// Declaration and Initialization
8let y = 20;
9
10// Declaration and mandatory Initialization
11const z = 30;

What is variable hoisting?

In JavaScript, variable declarations are hoisted to the top of their scope during the compilation phase. However, only the declarations are hoisted, not the initializations. This means that you can access a variable before it is declared in your code.

Original Code:

1console.log(x); // undefined
2var x = 10;
3console.log(x); // 10

How JavaScript interprets it due to hoisting:

1var x;
2console.log(x); // undefined
3x = 10;
4console.log(x); // 10

As shown above, the declaration var x; is moved to the top, but the assignment x = 10; remains in place.

How Hoisting Works with Variables

Hoisting with var

Variables declared with var are hoisted to the top of their scope and initialized with undefined.

1console.log(x); // undefined
2var x = 10;
3console.log(x); // 10

In the above example, var x = 10; is interpreted as two separate statements: var x; and x = 10;. This is why the first console.log(x); outputs undefined.

Hoisting with let and const

Variables declared with let and const are also hoisted to the top of their scope but are not initialized.

1console.log(y); // ReferenceError: Cannot access 'y' before initialization
2let y = 20;
3console.log(y); // 20

In the above example, let y = 20; is not initialized during hoisting, which is why the first console.log(y); throws a ReferenceError.

Temporal Dead Zone (TDZ)

The Temporal Dead Zone (TDZ) is a period in which a variable declared using let or const is hoisted but cannot be accessed before its declaration is encountered. This happens because JavaScript does not initialize let and const variables with undefined like var, which leads to a ReferenceError if they are accessed before declaration.

1console.log(z); // ReferenceError: Cannot access 'z' before initialization
2const z = 30;
3console.log(z); // 30

Similarly, const behaves the same way as let but requires an immediate initialization.

1console.log(z); // ReferenceError: Cannot access 'z' before initialization
2const z = 100;

Best practices to avoid hoisting-related issues

To write cleaner and more predictable JavaScript code, I follow these best practices:

• Use let and const instead of var: This prevents unintentional undefined values due to hoisting.
• Declare variables at the top of their scope: This improves readability and minimizes confusion.
• Understand the Temporal Dead Zone: Avoid accessing variables before they are declared.