Hoisting in JavaScript: The Simple Concept That Can Trick You

Hoisting is one of the most commonly asked JavaScript interview questions, often considered a beginner-friendly concept. However, its behaviour can be deceptive, leading even seasoned developers into traps.

---

What is Hoisting?

Hoisting in JavaScript is a behaviour in which variable and function declarations are moved to the top of their containing scope (script or function) during the compilation phase, before the code execution.

Only the declarations are hoisted, not the initialisations or assignments.

Hoisting has a different behaviour for Variables, Functions & Classes. Lets understand them one by one.

---

Variable Hoisting

Hoisting for var keyword

• Variables declared using var are hoisted, but their initialisation remains in place.

console.log(a); // Output: undefined (declaration hoisted, not initialisation)
var a = 5;
console.log(a); // Output: 5

Hoisting for let & const keywords

• Variables declared with let and const are also hoisted, but they are not accessible before their declaration due to the "temporal dead zone."

console.log(b); // ReferenceError: Cannot access 'b' before initialisation
console.log(c); // ReferenceError: Cannot access 'c' before initialisation
let b = 10;
const c = 'alphabet';

---

Function Hoisting

• Function declarations are fully hoisted, meaning you can call a function before it is defined.

greet(); // Output: Hello!
function greet() {
    console.log("Hello!");
}

• Function expressions (using var, let, or const) are not fully hoisted; only the variable declaration is hoisted, not the assignment.

sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
     console.log("Hello!");
};

---

Class Hoisting

• Classes are not hoisted in the same way as functions. Using a class before declaring it will result in a ReferenceError.

const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialisation
class MyClass {
    constructor() {
        console.log("Hello from MyClass!");
    }
}

---

Good To Remember

• Hoisting occurs within the scope where a variable or function is defined. Variables declared inside a function are hoisted to the top of that function's scope.

• For let and const, a "temporal dead zone" exists from the start of the block until the variable's declaration is encountered. During this period, accessing the variable will throw a ReferenceError.

---

A few Best Practices to follow

• Declare variables and functions at the top of their scope to avoid confusion and bugs.

• Avoid using var in modern JavaScript; prefer let and const.

• Understand the difference between function declarations and expressions to avoid errors.

---

Extra Information

What is Temporal Dead Zone(TDZ)?

• The Temporal Dead Zone (TDZ) is the time between the start of a variable's scope and its declaration in the code. During this period, accessing the variable will throw a ReferenceError.

Why does TDZ exist?

1. Predictable Behavior

2. The TDZ ensures that variables are not used before they are properly declared and initialized.

3. Prevention of Common Bugs

4. Without the TDZ, variables might have undefined or unintended values before initialization, leading to hard-to-debug issues.

5. Encourages Declarative Code

6. By requiring variables to be declared before use, the TDZ promotes clearer and more structured code.

Hoisting might seem like a straightforward concept, but its nuances can catch even experienced developers off guard. By understanding how declarations are treated under the hood, you can write cleaner, more predictable code and ace those tricky interview questions. Remember, mastering the basics is the first step to becoming a JavaScript pro! Happy coding!

The above is the detailed content of Hoisting in JavaScript: The Simple Concept That Can Trick You. For more information, please follow other related articles on the PHP Chinese website!