Is hoisting a good thing or bad thing?

It's a language quirk from JavaScript's early design. Function hoisting is convenient (call functions before defining them). Variable hoisting with var is dangerous (silent undefined). Modern let/const with TDZ is the safest approach.

Are class declarations hoisted?

Yes, but like let/const they're in the TDZ. You can't use a class before its declaration: new MyClass() before 'class MyClass {}' throws a ReferenceError.

Does hoisting cross function boundaries?

No. Hoisting only moves declarations to the top of their containing scope. A var inside a function is hoisted to the function top, not to the global scope. let/const are hoisted to their block.

Why does typeof work with undeclared variables?

typeof is a special operator that never throws for undeclared variables — it returns 'undefined'. But with let/const in TDZ, typeof DOES throw a ReferenceError. This inconsistency is another reason to prefer let/const.

JavaScript Hoisting

Why some code works before it appears. Declarations move to the top.

Module 6 · How JavaScript Works

Understanding the engine makes you a better debugger. Execution contexts, the call stack, hoisting, memory allocation, closures, and the prototype chain explain why JavaScript behaves the way it does under the hood.

Hoisting moves declarations to the top of their scope during compilation — which is why functions can run before their line and var reads as undefined instead of throwing.

About this module

JavaScript looks simple on the surface, but the engine does a lot of work behind the scenes. Variables are hoisted, functions create new execution contexts, the call stack tracks nested calls, and the prototype chain resolves property lookups.

This module is for developers who want to stop guessing and start understanding. Visual diagrams of the call stack, heap, and scope chain make abstract concepts concrete — and directly improve your debugging skills in real projects.

Why this matters

Hoisting explains some of JavaScript's most surprising behavior. It appears in virtually every interview, causes subtle var bugs in loops, and makes the case for let, const, and the temporal dead zone.

Key topics covered

What is Hoisting?
Function Hoisting
var Hoisting
Temporal Dead Zone
Hoisting Precedence

Where you'll use it

Avoiding var redeclaration surprises in legacy codebases
Understanding why function declarations work before their definition
Debugging 'Cannot access before initialization' with let/const
Reviewing code where declaration order affects behavior

What is Hoisting?

JavaScript moves declarations to the top of their scope before executing.

What you write:

greet();

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

What the engine sees:

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

greet(); // ✓ works!

💡 "Hoisting" isn't literally moving code. The engine scans declarations first (creation phase), then executes. It just appears like declarations moved up.

Function Hoisting

Function declarations are fully hoisted — usable anywhere in their scope.

// ✓ Works — function declarations are hoisted:
const result = add(2, 3); // 5

function add(a, b) {
  return a + b;
}

// ✗ Fails — function expressions are NOT hoisted:
const result2 = multiply(2, 3); // TypeError!

const multiply = function(a, b) {
  return a * b;
};

// ✗ Also fails — arrow functions:
const result3 = divide(10, 2); // TypeError!

const divide = (a, b) => a / b;

✓ Hoisted (fully)

function name() {}

✗ NOT hoisted

const fn = function() {}

const fn = () => {}

var Hoisting

var declarations are hoisted but NOT their assignments.

console.log(x); // undefined (not ReferenceError!)
var x = 5;
console.log(x); // 5

var is hoisted with a value of undefined. The assignment (= 5) stays in place and runs during execution.

💡 Declaration hoisted → value is undefined until assigned

1 / 3

Temporal Dead Zone

let and const exist but can't be accessed until their declaration.

// The Temporal Dead Zone (TDZ):
{
  // ┌── TDZ for 'x' starts ──┐
  // │                          │
  console.log(x); // ReferenceError!
  // │                          │
  // └── TDZ for 'x' ends ─────┘
  let x = 10; // ← x is now initialized
  console.log(x); // 10 ✓
}

// Same for const:
console.log(PI); // ReferenceError!
const PI = 3.14;
console.log(PI); // 3.14 ✓

Timeline of a let/const variable:

TDZ (ReferenceError)

Initialized (safe to use)

↑ declaration reached

Hoisting Precedence

What happens when names collide.

// Function declarations beat var declarations:
var foo = "variable";
function foo() { return "function"; }
console.log(typeof foo); // "function"
// Function was hoisted above the var

// But assignment wins in execution:
var bar = "I win";
function bar() { return "function"; }
console.log(bar); // "I win"
// After execution, the assignment overwrites

// Function declarations beat each other (last wins):
function x() { return 1; }
function x() { return 2; }
x(); // 2 — last declaration wins

💡 Best practice: Use const/let and avoid relying on hoisting. Declare everything before use. Problems with hoisting are why let/const were created.

FAQ

Common questions about hoisting.

// ✓ Works — function declarations are hoisted: const result = add(2, 3); // 5 function add(a, b) { return a + b; } // ✗ Fails — function expressions are NOT hoisted: const result2 = multiply(2, 3); // TypeError! const multiply = function(a, b) { return a * b; }; // ✗ Also fails — arrow functions: const result3 = divide(10, 2); // TypeError! const divide = (a, b) => a / b;

// The Temporal Dead Zone (TDZ): { // ┌── TDZ for 'x' starts ──┐ // │ │ console.log(x); // ReferenceError! // │ │ // └── TDZ for 'x' ends ─────┘ let x = 10; // ← x is now initialized console.log(x); // 10 ✓ } // Same for const: console.log(PI); // ReferenceError! const PI = 3.14; console.log(PI); // 3.14 ✓

// Function declarations beat var declarations: var foo = "variable"; function foo() { return "function"; } console.log(typeof foo); // "function" // Function was hoisted above the var // But assignment wins in execution: var bar = "I win"; function bar() { return "function"; } console.log(bar); // "I win" // After execution, the assignment overwrites // Function declarations beat each other (last wins): function x() { return 1; } function x() { return 2; } x(); // 2 — last declaration wins

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What is Hoisting?

Function Hoisting

var Hoisting

Temporal Dead Zone

Hoisting Precedence

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What is Hoisting?

Function Hoisting

var Hoisting

Temporal Dead Zone

Hoisting Precedence

FAQ