Temporal Dead Zone(TDZ) in Javascript

Temporal dead zone sounds like a sci-fi phrase but yet important to understand. This is the topic which I think every developer should know .

Now lets deep dive in it to know what are TDZ ??

In the beginning there is just one type of variable that is var . But after the release of ES6 specification we have come to know about two more variables and they are let and const.

The major differences between var , let and const are as follows :

* Declaration and Initialization differences between them

When we declare a variable with var without intializing it , it will be intialized anyway . The variables which we defined with var will have default value that is undefined . Undefined is just the placeholder assigned till we don't initialize the var variable . One more interesting thing about var is that we can re-declare it as many times we want and it will overwrite the older one . But this is not the case with let and const if we will try to re-declare in the same scope it will give syntaxError .

Here is an example :

// Declare variable with var
// This will work perfectly fine
var variable1 = 'shreya'
var variable1 = 'riya'

console.log(variable1)
// Output:
// 'riya'


// Declare variable with let
let variable2 = 'riya'
let  variable2 = 'shreya'
// SyntaxError: Identifier 'variable2' has already been declared


// Declare variable with const
const variable3 = 'riya'
const variable3 = 'shreya'
// SyntaxError: Identifier 'variable3' has already been declared

* Accessing variable before intialization

In var if we will access variable before initialization it will give undefined as output.

Here an example :

console.log(a);
var a = 20 ;
// output : 20

But when we will declare a variable with let and const they work differently . If we will access variable before initialization then they will give reference error .

Here an example :

console.log(a);
let a = 20 ;
// output :

So now you must be wondering that if let and const are also hoisted like var then why let and const give reference error ??🤔🤔

Then temporal dead zone comes into the picture 🤩

Temporal dead zone is the phase between hoisting of variable to initialization it with some value . In short, temporal dead zone describes a zone where variables are un-reachable. These two variables exist in the temporal dead zone from the start until you initialize them.

This is also where the temporal dead zone is. Its beginning of the current scope at which you declared the variables. The end of it is where the variable is actually declared, where you assign that variable with some value. This phase is temporal dead zone.

{
     console.log(age); 

     // This is the temporal dead zone for the age variable
    // This is the temporal dead zone for the age variable!

    let age = 25; // Yayy, we got there! No more TDZ

}

But because it is in TDZ and we are trying to access it then javascript engine will throw error .

More examples of the TDZ :

The TDZ can also be created for default function parameters. So something like this:

function createTDZ(a=b, b) {
}

createTDZ(undefined, 1);

throws a ReferenceError, because the evaluation of variable a tries to access variable b before it has been parsed by the JS engine. The function arguments are all inside the TDZ until they are parsed.

Even something as simple as let tdzTest = tdzTest; would throw an error due to the TDZ. But var here would just create tdzTest and set it to undefined.

How to avoid TDZ ??

Relatively simply, always make sure you define your let and const at the top of your scope.

Thanks, Happy coding😁

Priya Patel