Temporal Dead Zone

TABLE OF CONTENTS

• Temporal Dead Zone
• What is Temporal Dead Zone
• Why is Temporal Dead Zone
• Burning Tip
• Question for you
• To Summarise
• End Note

You might be thinking what’s this dangerous thing is? It looks like a sci-fi term. No, The Temporal Dead Zone(TDZ) occurs in JavaScript. Amazed! Let’s dive deep into it and explore more..

So before ES6, let and const were not introduced. Means in ES5 we have only var to declare the variables. But in ES6 we have let and const also to declare a variable. And let and const are block scoped which means they are only accessible within the block scope i.e. {} surroundings. While if we see var, it has no such restrictions. And if we access var variables before its declaration, it would simply give you the result as undefined. Let’s see this by the following example.

console.log(a); // this will result “undefined”
var a = 10;

Now if we do the same with let, then it would give an Reference error. Let’s see:

console.log(c); // ReferenceError: Cannot access ‘c’ before initialization
let c = 10;

You might be thinking that how and why it happens. Simply you cant access any variable’s value before initialising it or declaring it. This will be more clear from the following image:

accessing value of “a” before initialization

This happens because of Hoisting . Then you might ask that if var was Hoisted then why not let also Hoisted. Here comes the Temporal Dead Zone. People usually misunderstand that TDZ means let and const do not hoist. This is an inaccurate, or at least not completely true. They definitely hoist. If you now also have confusion then:

So now you might be wondering that what is TDZ?

What is Temporal Dead Zone?

Don't scare.. It’s Easy !

It can be understand as a term to define the state where variables are not reachable. They are in scope, but they are not declared yet. The let and const variables exist in the TDZ from the start of their enclosing scope until they are declared. Consider the following example:

//This is temporal dead zone for variable a
let a = 10;// TDZ ends
console.log(a);

You can see in the code above that if I accessed the a variable earlier than its declaration, it would throw a ReferenceError. Because of the TDZ.

Now let’s see the following example to understand it more clearly:

let a= 10; //outer value
if(true){
//TDZ starts for ‘a’ here
console.log(a); // here ‘a’ is in TDZ
let a = 10; // inner value // TDZ ends for ‘a’ as it is declared and initialised
}
// Output:- ReferenceError: Cannot access ‘a’ before initialization

Now lets see why TDZ at console.log(a). You can clearly observe as per the above discussion that let a will be hoisted on the top of the scope. But is it initialised yet? No, that’s why TDZ comes in picture. Basically, when let a will be hoisted, it will go into the TDZ, and will end whenever you declare and initialized it. So in the scopes first it will be in TDZ but as soon as it reaches to declaration part, TDZ will end.

Why is Temporal Dead Zone?

It helps us to catch the errors.
To try and access a variable before it is declared is the wrong way.

Burning Tip🔥

To avoid TDZ, always make sure you define your let and const at the top of any scope.

Question for you

Your code is:-

console.log(a); //Comment your answer on the blog’s comment section.
var a = 42;

To Summarise

We can simply understand this term by breaking it in pieces. Temporal means something that is temporary, Dead means something that is lifeless state, and Zone in programming world related to memory. So that time zone in which the variable is unavailable(or dead) temporarily is in TDZ.

Or Simply, The Timespan between the creation of a variable and its declaration is called the Temporal Dead Zone.

End note

I hope you are now clear with the Temporal Dead Zone! Would love to know your feedbacks in the comments!