Temporal Dead Zone

Temporal Dead Zone (TDZ), though the term is quite terrifying, the concept is quite simple and easy to understand. TDZ was introduced in ES2015/ES6 along with the new 'let' and 'const' to overcome the loop holes caused by the old 'var'. It is very important to understand what is TDZ because it makes our code simple to understand and easy to debug.

For better understanding the TDZ we should be aware of the basic concepts of Hoisting and let, const and var in JavaScript. With that being said let's get started,

What is TDZ?

//Example no.1 -> what do you think will be the output?
console.log(a);
var a = 55;

// output: undefined

In the above example we do not get an Error ReferenceError: a is not defined because variable 'a' will be allocated a memory in the global object and will be initialised with a special value undefined due to hoisting principle. Consider the code given below👇🏼

// Example no.2 -> output in this case?

console.log(a);
let a = 55;

// output: ReferenceError: Cannot access 'a' before initialization

Variables declared using let and const also will be allocated a memory location but not in the global object, they are stored altogether in a separate memory location (reserved only for let and const variables), and in this separate memory location we cannot access a variable before initializing it (or before declaring them at the top of the scope in case of let).

Therefore, in the above example we cannot access 'a' because it's inside of the Temporal Dead Zone

Variables declared with `let/const` are hoisted?

Yes! as you can see in the Example no.2, even here we do not get an error stating ReferenceError: a is not defined because they are hoisted, but we cannot access them before initializing them. This exact zone(time period) here is called as Temporal Dead Zone.

TDZ

Temporal Dead Zone is the time period between a variable getting declared and hoisted, to the point we initialize that variable with some value. We can call this zone a Dead zone because we cannot access any variable in this zone.

console.log(a);  // a is in TDZ
let a = 55;     // initialization: end of TDZ, we can access a from here without problem.
console.log(a)  // output: 55

Some Advanced Examples:

courtesy: TDZ Demystified

Example No.3:

// guess the output?
let a = a;

Output: ReferenceError: Cannot access 'a' before initialization. As JS expressions are evaluated for right-to-left, as soon as we run the code 'a' gets hoisted(in TDZ), then line-by-line code will be executed, on line no.1, firstly (from right) 'a' is evaluated, and here only it will throw an error, because a's initialization hasn't been encountered yet (though it is at it's very left) and hence code won't be executed.

Example No.4:

let a = f();    // line 1
const b = 2;   // line 2
function f() { return b; }

Output: ReferenceError: Cannot access 'b' before initialization

This example clearly describes what we mean by stating 'time period' in TDZ's definition,
Here as per our code, 'b' is initialized before it is returned (right?), actually No, as soon as f() gets executed it tries to return 'b', but 'b' is in TDZ (because line 1 is getting evaluated, and line 2 is not even been encountered) and hence it will throw an error there itself.

Best Practices to Avoid TDZ errors:

Always try to declare and initialize variables at very top of your scope. Due to this TDZ (time period) will shrink to zero.
Try to use const as much as possible and use let where you know you'll change it's value in future.
It's better to keep var aside for day to day coding, use it very cautiously only in some exceptional cases.

Conclusion:

This was all about the Temporal Dead Zone. If you've reached this point, Thanks for taking your time and reading this article, hope you've enjoyed reading it and found it helpful. Do not hesitate to share your feedback.

Lets connect 🤙🏻

The Temporal Dead Zone.