Hoisting

Variable Hoisting

What is Hoisting?

JavaScript moves declarations to the top of their scope during compilation.

var Hoisting

console.log(x); // undefined (not error!)
var x = 10;

// Interpreter sees:
var x;           // Declaration hoisted
console.log(x); // undefined
x = 10;         // Assignment stays

let/const Hoisting

console.log(y); // ReferenceError!
let y = 20;

// let/const are hoisted but not initialized
// They're in the Temporal Dead Zone

Hoisting Scope

// Global scope
console.log(a); // undefined
var a = 1;

function example() {
  // Function scope
  console.log(b); // undefined
  var b = 2;
  
  if (true) {
    // Block scope
    console.log(c); // ReferenceError!
    let c = 3;
  }
}

Hoisting Order

// 1. Function declarations (fully hoisted)
// 2. var declarations (hoisted, not initialized)
// 3. let/const declarations (hoisted, TDZ)
// 4. Function expressions/arrow functions

Common Hoisting Patterns

// Using hoisting for declarations
function checkAge() {
  // Declare first, use later
  let message;
  
  if (age >= 18) {
    message = 'Adult';
  } else {
    message = 'Minor';
  }
  
  return message;
}

Hoisting Gotchas

// var in blocks
if (true) {
  console.log(x); // undefined
  var x = 10;
}
console.log(x); // 10 (var ignores block!)

// Let/const in blocks
if (true) {
  // console.log(y); // ReferenceError!
  let y = 20;
}
// console.log(y); // ReferenceError!

Function Hoisting

Function Declarations are Fully Hoisted

// Call before declaration works!
greet(); // "Hello!"

function greet() {
  console.log('Hello!');
}

Function Expressions are NOT Hoisted

// Error!
sayGoodbye();

var sayGoodbye = function() {
  console.log('Goodbye!');
};

// var is hoisted, but assignment is not
// sayGoodbye is undefined, not a function

Arrow Functions are NOT Hoisted

// Error!
multiply(2, 3);

const multiply = (a, b) => a * b;

Hoisting Priority

// Function declarations override var
var x = 1;
function x() {
  return 2;
}
console.log(x); // 1 (assignment wins)

// But before assignment:
console.log(x); // function x() { return 2; }

Named Function Expressions

// Name is only accessible inside
const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

// fact is not accessible outside

Class Declarations are NOT Hoisted

// Error!
const obj = new MyClass();

class MyClass {
  constructor() {
    this.name = 'John';
  }
}

Temporal Dead Zone

What is TDZ?

The period between hoisting and declaration where let/const variables exist but can't be accessed.

{
  // TDZ starts here
  // console.log(x); // ReferenceError!
  let x = 10;       // TDZ ends here
  console.log(x);   // 10
}

TDZ vs var

// var: no TDZ, returns undefined
console.log(a); // undefined
var a = 5;

// let/const: TDZ, throws error
// console.log(b); // ReferenceError!
let b = 10;

TDZ in Loops

// TDZ creates proper loop closure
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 0, 1, 2 (not 3, 3, 3)

TDZ in Functions

function example() {
  // TDZ for parameters
  // console.log(x); // ReferenceError!
  
  return x;
  let x = 10;
}

example(); // ReferenceError!

TDZ with typeof

// typeof is safe with undeclared variables
console.log(typeof undeclared); // "undefined"

// But not with TDZ
{
  // console.log(typeof x); // ReferenceError!
  let x = 10;
}

Why TDZ Exists

// Prevents using uninitialized variables
let result = double(5);

function double(x) {
  return x * 2;
  // This would be bad if we could use 'result' here
}

TDZ and Closures

// TDZ creates proper closures in loops
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // 3, 3, 3
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // 0, 1, 2
}