Temporal Dead Zone in JavaScript

In JavaScript Dead Zone or the Temporal Dead Zone (TDZ) is created when you create variables using let keyword or const keyword. When you create a variable using the let or const keyword, and you try to access the variable before the line of code where you are declaring the variable, you will get a ReferenceError. Why? Because variables created using the let and const keywords are hoisted but are inaccessible (in the Dead Zone or act as Dead) until the line of code where they are declared. This zone or area where the variable exists but is not accessible is the Dead Zone or the Temporal Dead Zone.

On the other hand, when you create a variable using the var keyword, the variable's declaration is hoisted but not the assignment, hence you get the variable's reference, but with the value undefined.

Let's see an example and understand this,

{
    // This is also TDZ 

    console.log(someVar)  // This will give ReferenceError

    // This is also TDZ

    let someVar = 10;
}

In the example above, I have declared and initialized a variable someVar inside a block. Because of hoisting the variable should be hoisted to the top of the block in which it is initialized, but the variable is declared using the let keyword, so even if the variable is hoisted, it won't be accessible until line number 8 where it is declared and initialized. So from line number 1 to line number 7, it is the temporal dead zone for the variable someVar.

On the other hand, when we declare a variable using the var keyword,

{
    console.log(someVar)  // gets undefined

    var someVar = 10;
}

The variable declaration is hoisted and the variable is accessible also, but the initialization part is not hoisted, hence the variable will not have any value, when you try to log it on the console, you will get undefined.

Temporal Dead Zone for var's Variable

For variables created using var keyword, you can say there is no temporal dead zone, "practically". Theoretically, there is a TDZ, but it has no effect because you will never get a ReferenceError for variables created using the var keyword.

The TDZ for a var variable ends immediately where the variable is hoisted.

So in a way, the TDZ for a var variable starts and ends at the same point. Because, when a variable is hoisted, its declaration is hoisted to the top of the block in which it is defined. The variable declaration is given priority before any other code in the block.

To better understand TDZ, you must understand the concept of hoisting in JavaScript.

Temporal Dead Zone for let and const Variables

Yes, for variables created using the let and const keywords, a temporal dead zone is there. The variables created using let and const keyword are hoisted, but you cannot access them before the code where they are created, because they are in the dead zone while being hoisted.

So even though the variable declaration is hoisted, it remains dead. Hence, if you try to access such a variable, you get a ReferenceError.

Temporal Dead Zone for Class Declaration

Yes, even class declarations are hoisted, but just like the let and const variables, the class declaration also remains in the temporal dead zone.

Hence, if you have created a class in JavaScript, if you try to access it before its declaration, you will get a ReferenceError.

Here is an example,

console.log(SomeClass);

class SomeClass {
    // class body
}

ReferenceError: Cannot access 'SomeClass' before initialization

Hence, the behavior of class declaration, let and const variable declaration is the same. They are hoisted but stay in the dead zone.

Find Temporal Dead Zone in Code

There are many code linters that you can use to identify potential temporal dead zones in your code so that you can avoid getting ReferenceError in your application.

But as they say, prevention is better than cure, so it is better that you do not rely on hoisting. Use access and use the variables only after the code where it is declared. The same is true for functions and classes.

How to Avoid Temporal Dead Zone?

1. Create variables using let and const keywords. Do not rely on variable hoisting.

2. Even if you create variables using the var keyword, you should be a little careful with that. Because variables created using the var keyword have global scope, and they are hoisted too, the chances of using them and making your code confusing are high.

3. Never use a variable before creating it.

4. You should have a good understanding of block scope in JavaScript.

End Note

It can be a little tricky for beginners to understand how temporal dead zone works, so its better to avoid it altogether. I hope this article helps you in building some understanding around the concept of Temporal Dead Zone in JavaScript.