⬆️Hoisting & TDZ

Hoisting moves declarations to top of scope. TDZ prevents accessing let/const before declaration. var gets undefined, let/const throw ReferenceError.

Memory Trick

var = permissive parent (undefined until assigned). let/const = strict teacher (you MUST declare before use).

1️⃣ Definition

Hoisting: JavaScript moves variable and function declarations to the top of their scope during the compilation phase.

TDZ (Temporal Dead Zone): The time between entering a scope and the variable's declaration, during which accessing a let or const variable throws a ReferenceError.

Keyword	Hoisted	Initialized	TDZ
`var`	✅	`undefined`	❌ No TDZ
`let`	✅	❌	✅ Exists
`const`	✅	❌	✅ Exists
function declaration	✅ Fully	✅	❌ No TDZ

2️⃣ How It Works

js
// var — hoisted & initialized to undefined
console.log(a); // undefined (no error)
var a = 10;

// let — hoisted but in TDZ
console.log(b); // ReferenceError!
let b = 20;

// function declaration — fully hoisted
foo(); // works! ✅
function foo() { return 42; }

// function expression — subject to TDZ
bar(); // ReferenceError
let bar = function() {};

3️⃣ Why TDZ Exists

TDZ was introduced to:

Prevent bugs from using variables before they're initialized
Catch errors early — ReferenceError > silent undefined bug
Make code predictable and easier to reason about
Encourage safer, intention-revealing code patterns

TDZ trades convenience for correctness.

Was this helpful?

Found an issue? Report here

Test your Knowledge

3 questions to cement what you just learned.