Javascript – The Temporal Dead Zone (TDZ)

According to MDN :

In ECMAScript 2015 (ES6), let bindings are not subjected to variable hosting, which means let declarations do not move to the top of the current execution context.

What is Temporal Dead Zone, Explain with example ?

The Temporal Dead Zone (TDZ) in JavaScript is a concept that relates to the behavior of variables declared with let and const, Understanding the TDZ helps in writing cleaner and more predictable code by ensuring variables are not used before they are properly declared.

Here is a brief:

1. Hoisting: Variables declared with let and const are hoisted to the top of their block scope, but unlike var, they are not initialized until the line of code where they are declared is executed.
2. TDZ Duration: The TDZ starts from the beginning of the block until the variable’s declaration is encountered. During this period, accessing the variable will throw a ReferenceError.

Example:

using let

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;

using var

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

For let, referencing the variable in the block before the initialization results in a ReferenceError (contrary to a variable declared with var, which will just have the undefined value(). The variable is in a “temporal dead zone” from the start of the block until the initialization is processed.

function do_something() {
	console.log(bar); // undefined
	console.log(foo); // ReferenceError: foo is not defined // TDZ
	
	var bar = 1;
	let foo = 2;
}

Temporal Dead Zone Explained

This is what the TDZ is: the term to describe the state where variables are un-reachable. They are in scope, but they aren’t declared.

The let and const variables exist in the Temporal dead zone from the start of their enclosing scope until they are declared:

{
 // this is temporal deadzone for the age variable!
 // this is temporal deadzone for the age variable!
 // this is temporal deadzone for the age variable!
 // this is temporal deadzone for the age variable!
 let age = 25; // Whew, we got there ! No more TDZ
 console.log(age);
 }

You can see, that if I accessed the age variable earlier than its declaration, it would throw a ReferenceError, because of the TDZ. But var, won’t do that. var is just default initialized to undefined unlike the other declaration.

If we add a console.log inside the TDZ you will see this error:

Why does the TDZ exist between the top of the scope and the variable declaration ?

It’s because of hoisting :

The JS engine that is parsing and executing your code has 2 steps to do:

1. Parsing of the code in to an Abstract Syntax Tree/executable byte code
2. Run time execution

Why do we have the TDZ ?

It helps us catch errors. To try and access a variable before it is declared is the wrong way round, and shouldn’t be possible.

It also gives more expected and rational semantics for const (because const is hoisted, what happens if a programmer tries to use it before it is declared at runtime? What variable should it hold at the point when it gets hoisted?), and was the best approach decided by the ECMAScript spec team.

With typeof

Using the typeof operator to check that type of a variable in its TDZ will throw a ReferenceErrror. But for the undeclared variables it will throw undefined.

console.log(typeof iAmNotDeclared); // undefined
console.log(typeof iAmDeclared); // ReferenceError: iAmDeclared is not defined

// Above this is it's temporal dead zone
let iAmDeclared = 10;

With lexical or block scoping

function test() {
	var foo = 33;
	if (true) {
		let foo = (foo + 55); // ReferenceError: foo is not defined // TDZ
	}
}

Due to lexical or block scoping let foo = (foo + 55) access the foo of current block that is inside the if condition. It does not access the var foo = 33; as let is block scoped. let foo is declared but it is not initialized that is why it is still in temporal dead zone.

Ref :

• https://2ality.com/2015/10/why-tdz.html
• https://www.freecodecamp.org/news/what-is-the-temporal-dead-zone
• https://github.com/google/traceur-compiler/issues/1382#issuecomment-57182072