Temporal Dead Zone (TDZ): An bug like feature of JavaScript

Hey 👋
You probably landed here after reading my LinkedIn post. Even if not, you’re in the right place to understand a bug-like feature of JavaScript called Temporal Dead Zone (TDZ).

Before jumping into TDZ, we first need to understand hoisting.

What is Hoisting?

Hoisting is a JavaScript behavior where declarations (variables, functions, classes) are processed before code execution, during the creation phase of the execution context.

Important:
Declarations are conceptually moved to the top — not physically in the code you see or inspect.

Let’s see this with examples.

var Hoisting (Declaration Only)

console.log('age var is:', age);        // undefined
console.log('showAge() returns:', age); // undefined

var age;

function showAge() {
  return age;
}

No error here. Why?
Because:

• var age is hoisted
• JavaScript initializes it with undefined
• Functions are fully hoisted

Declaration vs Initialization

console.log("Age is:", age);
console.log("showAge() is:", age);

var age = 5;

var showAge = function () {
  return age;
};

If you expected 5 and 5, read this carefully 👇

Only declarations are hoisted – not initializations.

So internally, JavaScript sees it like this:

var age;        // hoisted → undefined
var showAge;   // hoisted → undefined

console.log(age);      // undefined
console.log(showAge); // undefined

age = 5;
showAge = function () {};

That’s why the output is:

undefined
undefined

Now Comes the Temporal Dead Zone (TDZ)

Temporal Dead Zone is a JavaScript behavior where:

• let and const are hoisted
• BUT not initialized with undefined
• Accessing them before their declaration line throws an error
• In simple words: TDZ is the time between hoisting and initialization.

TDZ Example with let

// TDZ starts
console.log("Age is:", age); 
// ❌ ReferenceError: Cannot access 'age' before initialization

let age; // TDZ ends

Instead of returning undefined, JavaScript throws an error.
❌ ReferenceError: Cannot access ‘age’ before initialization

That’s intentional.

Another let Example

console.log("Name is:", name);

let name;
name = "Mr. ABC";

Output:
ReferenceError: Cannot access ‘name’ before initialization

• “Cannot access” -> JS knows the variable exists (it’s hoisted)
• “Before initialization” -> It’s not assigned yet
• Initialization happens only at the declaration line
• var does NOT have this restriction
• let allows reassignment, but only after initialization

// TDZ with const
console.log(PI);

const PI = 3.14;

Output:
ReferenceError: Cannot access ‘PI’ before initialization

Why this happens:

• const is hoisted
• JavaScript cannot auto-initialize it with undefined
• Initialization must happen at declaration
• Accessing it earlier -> error
• Reassignment is not allowed at all

So Why Was TDZ Introduced?

console.log(total); // undefined
var total = calculate();

This often caused silent bugs – code runs, but logic breaks.

To prevent this, JavaScript introduced Temporal Dead Zone.

TDZ forces you to declare and initialize variables before using them.

Benefits of Temporal Dead Zone, From real-world experience 👇

1. You can’t accidentally use variables before assigning values
2. Bugs caused by undefined are caught early
3. Debugging becomes faster and clearer
4. Code becomes predictable, safer, and easier to reason about

Final Thoughts

At first glance, Temporal Dead Zone feels like a JavaScript bug.
Why throw an error when undefined worked fine earlier?

But once you understand the why, it clicks 💡

• TDZ isn’t a limitation
• it’s a guardrail

It forces discipline, prevents silent failures, and makes your code more intentional.

So yeah…

what looked like a bug at first

turned out to be a well-designed safety feature 🚀