The Temporal Dead Zone (TDZ), although the name may seem intimidating the idea is actually rather simple. The TDZ, along side with two new types of variable called const and let were introduced in ES6.

Before diving into TDZ, let us understand the difference between var, let and constvariables.

var: It is global or function scoped, can be re-declared.

let: It is block scoped, value can be updated but variable once declared cannot be re-declared inside the same scope.

const: It is block scoped, value cannot be updated and variable also cannot be re-declared.

Let us discuss with example code:

// Guess the output of the code:

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

// output: undefined

If you are confused why output is undefined and not 10, then you should keep reading this article. It happens because of hoisting.

Hoisting

Hoisting simply means, we can access a variable even before it is initializes i.e. memory is allocated to all the variables even before single line of code is been executed. In the above example, we do not get Error ReferenceError: a is not defined because variable 'a' will be allocated a memory in the global object and will be initialized with a special value undefined. Consider another example:

// Guess the output in this case?

console.log(a)
let a = 6;

// output: ReferenceError: a is not defined

Variables declared using let and const also will be allocated a memory location but not in global object, they are stored altogether in a separate memory location which is only reserved for let and const variables, and we cannot access variables residing in this separate memory location before initializing. That is why we cannot access 'a' because it is inside the Temporal Dead Zone

Temporal Dead Zone

The Temporal dead zone is the time period between a variable getting declared and hoisted, to the point we initialize that variable with some value.

console.log(a); // a is in TDZ

// output: ReferenceError: a is not defined

let a = "bar" // initialization: end of TDZ, we can access 'a' from here without any problem.
console.log(a)  // output: bar

Consider other example:

function testingFunc(){
console.log(a);   //Reference Error: a is not defined
console.log(b);  //Reference Error: b is not defined

console.log(c);  //undefined

const a="Hello";   //TDZ of a ends here
let b="World";      //TDZ of b ends here
var c="Hoisted";
}
testingFunc();

Whenever we try to access a variable inside its TDZ, we get a Reference error.

From above examples, we can see that variables let and const are also hoisted but they are not assigned a special keyword undefined, also they are stored in a separate memory location called script where we cannot access them.

Pro Tips To Avoid TDZ errors

• Use const most of the time and use let, unless that variable requires a certain change in the future.
• Try not to use var as it various loop holes, and make it very hard to debug a program
• Always try to initialize let and const type of variables at the top of the scope of your program so that variables doesn't go through TDZ.

Conclusion

This was all about Hoisting and temporal zone. Thank you for taking time and reading this article, I hope you have found it helpful and enjoyed reading it. I would love to hear a feedback.

Happy Learning !!