Variable Hoisting and Temporal Dead Zone in JavaScript

Description: Hoisting is a characteristic of JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase before code execution. However, variables declared with let and const are subject to the Temporal Dead Zone (TDZ), where accessing them before their declaration results in an error. Understanding this mechanism is crucial for avoiding runtime errors.

Step-by-Step Explanation:

1. Basic Concept of Hoisting

   • Before JavaScript code executes, the engine goes through a compilation phase, hoisting declarations of variables (with var) and functions (with function) to the top of their current scope.
   • Example:

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

     The actual execution order is equivalent to:

     var a; // Declaration is hoisted to the top, initial value is undefined
     console.log(a); // Access the declared but unassigned variable
     a = 10; // Assignment remains in place
     

2. Hoisting of Function Declarations

   • Function declarations are fully hoisted (including the function body):

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

   • However, function expressions are not fully hoisted (only the variable declaration is hoisted):

     bar(); // Error: bar is not a function
     var bar = function() {
       console.log("World");
     };
     

     Equivalent to:

     var bar; // bar is hoisted, initial value is undefined
     bar(); // Attempting to call undefined as a function, throws an error
     bar = function() { ... };
     

3. Temporal Dead Zone (TDZ) for let/const

   • Variables declared with let and const are also hoisted but are not initialized with undefined. They exist in a "Temporal Dead Zone" before their declaration, and accessing them results in an error:

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

   • TDZ is designed to prevent accidental usage of variables before their declaration, enhancing code reliability.

4. Verifying TDZ Behavior

   • Before a let declaration, any access (even with safe operations like typeof) will throw an error:

     typeof c; // Error (if c is declared with let/const)
     let c = 30;
     

   • Compare with var declaration:

     typeof d; // Output: "undefined" (no error)
     var d = 40;
     

5. Practical Application Notes

   • Always declare variables at the top of their scope to avoid relying on hoisting behavior.
   • Use let/const instead of var to leverage TDZ and reduce potential errors.
   • Example trap:

     let x = 1;
     {
       console.log(x); // Error: TDZ (because the inner let x affects the entire block)
       let x = 2;
     }
     

Summary: Hoisting is a compilation-phase behavior in JavaScript, while TDZ is a constraint mechanism introduced in ES6. Understanding their differences helps developers avoid reference errors and write more robust code.