Mystery of Hoisting in JavaScript!

JavaScript is full of quirks, and hoisting is one of those that tends to confuse newcomers. But don’t worry by the end of this post, you'll have a clear understanding of hoisting, simplified!

What Is Hoisting? ?

At its core, hoisting is JavaScript's default behavior of moving declarations to the top of their scope. This doesn't mean the code is physically rearranged—it’s just how the JavaScript engine interprets it.

Think of it this way: before JavaScript starts executing your code, it "prepares" by allocating memory for all variables and functions upfront, even before a single line of code is executed.

Common Myths About Hoisting

Only variables are hoisted.
?? Not true
Both function declarations and variable declarations are hoisted.

Hoisted variables are initialized automatically.
?? Wrong again
Variables are hoisted but not initialized. Their value remains undefined until explicitly assigned.

Understanding Hoisting with Examples ?

1. Variable Hoisting
Let’s start with variables declared using var:

console.log(greeting); // Output: undefined
var greeting = "Hello, World!";

What happens here? JavaScript treats the code like this during execution:

var greeting; // Declaration is hoisted
console.log(greeting); // Accesses the variable before initialization
greeting = "Hello, World!"; // Initialization happens here

But with let and const, it’s a different story:

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "Sudhil";

Variables declared with let or const are hoisted, but they’re in a "temporal dead zone" (TDZ) until their declaration is encountered.

2. Function Hoisting
Function declarations are fully hoisted, both their name and body are available before the line of declaration:

sayHello(); // Output: "Hello!"

function sayHello() {
    console.log("Hello!");
}

However, function expressions behave differently:

sayHi(); // TypeError: sayHi is not a function

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

In this case, the variable sayHi is hoisted but not initialized until the assignment is reached.

3. Class Hoisting
Classes behave similarly to let and const. They are hoisted but cannot be accessed before their declaration.

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

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

Why Does Hoisting Matter? ?

1. Predict Behavior
Understanding hoisting helps you predict how your code will run and avoid common pitfalls like using variables before they’re initialized.

2. Clean Code
To avoid confusion, declare variables and functions at the top of their scope. This aligns with JavaScript's hoisting behavior and makes your code more readable.

Wrapping It Up ?

Here’s What to Remember About Hoisting: ?

• Declarations (variables, functions, and classes) are hoisted; initializations are not.
• var declarations are hoisted with undefined; let and const stay in the temporal dead zone.
• Function declarations are fully hoisted, but function expressions are not.
• Hoisting helps the JavaScript engine understand your code, but understanding hoisting helps you write better code.

Thanks for reading! ?
Keep experimenting with JavaScript quirks, and stay tuned for more in this series.?
Happy Coding! ??‍?✨

The above is the detailed content of Mystery of Hoisting in JavaScript!. For more information, please follow other related articles on the PHP Chinese website!