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 initialization)
    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 initialization
 console.log(c); // ReferenceError: Cannot access 'c' before initialization
 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 initialization
  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
  The TDZ ensures that variables are not used before they are properly declared and initialized.
2. Prevention of Common Bugs
  Without the TDZ, variables might have undefined or unintended values before initialization, leading to hard-to-debug issues.
3. Encourages Declarative Code
  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!