Understanding Hoisting in JavaScript

Hoisting is one of the most fundamental concepts in JavaScript, yet it can be a source of confusion for beginners and even seasoned developers.

In this blog, we will demystify hoisting, explain how it works, and provide clear examples to help you fully understand this concept.

What is Hoisting?

Hoisting is a JavaScript mechanism where declarations of variables, functions, and classes are moved to the top of their scope during the compilation phase.

This means you can use these elements before they are actually declared in the code.

However, hoisting works differently for var, let, const, functions, and classes, and this is where confusion often arises

How Hoisting Works

When JavaScript code is executed, it goes through two phases:

1. Compilation Phase: During this phase, the engine hoists declarations to the top of their scope.

2. Execution Phase: The code runs line by line, respecting the rules of hoisting.

Hoisting Rules for Different Declarations

1. var

Variables declared with var are hoisted, but their value is not initialized. Before the initialization, they are set to undefined.

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

1. let and const

Variables declared with let and const are also hoisted but remain in the Temporal Dead Zone (TDZ). They cannot be accessed until their declaration is encountered in the code.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

1. Functions

Function declarations are fully hoisted, meaning both their name and body are moved to the top. This allows you to call functions before they are declared.

greet(); // Output: "Hello, World!"

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

However, function expressions are treated differently. They behave like variables declared with var, let, or const:

sayHi(); // ReferenceError: Cannot access 'sayHi' before initialization

const sayHi = function () {
    console.log("Hi!");
};

1. Classes

Classes are hoisted but remain in the Temporal Dead Zone, similar to let and const. You cannot access a class before it is declared.

const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor() {
        this.name = "Class";
    }
}

Understanding the Temporal Dead Zone (TDZ)

The Temporal Dead Zone is the period between the start of the scope and the point where the variable is declared. During this period, any access to let or const variables will throw a ReferenceError.

Key Takeaways

Declaration   Hoisted?       Behavior Before Initialization

var            Yes              undefined

let            Yes            ReferenceError (in TDZ)

const          Yes             ReferenceError (in TDZ)

Function Declaration  Yes       Fully hoisted, works before 
declaration

Function Expression  Partially (as var)   undefined or ReferenceError (if let/const)

Class           Yes              ReferenceError (in TDZ)

Conclusion

Understanding hoisting is critical for writing clean and predictable JavaScript code. While it may seem like magic at first, knowing the rules for var, let, const, functions, and classes will help you avoid common pitfalls. Always declare your variables and functions at the top of their scope to ensure clarity and reduce the chances of errors.

Happy coding!