TDZ

TDZ describe the state where variables are un-reachable. They are in scope, but they aren't declared. The let and const variables exist in the TDZ from the start of their enclosing scope until they are declared.

In ECMAScript 6, accessing a let or const variable before its declaration (within its scope) causes a Reference Error. The time span when that happens, between the creation of a variable’s binding and its declaration, is called the temporal dead zone.

let variables cannot be read/written until they have been fully initialized if no initial value is specified on declaration, the variable is initialized with a value of undefined. Accessing the variable before the initialization results in a Reference Error. The variable is said to be in a "temporal dead zone" (TDZ) from the start of the block until the initialization has completed.

Have a look at below example

// TDZ for role variable
const myName="John"
if(myName==="John"){
  console.log(`John is a ${role}`)   // here gives error "Uncaught ReferenceError: Cannot access 'role' before initialization" 
  const role="Engineer"
  console.log(x)   //Uncaught ReferenceError: x is not defined 
}

{ // TDZ starts at beginning of scope
  console.log(bar);     // give undefined in case of variable var if not initialized till now
  console.log(foo);     // give Reference Error because initialized till now

  var bar = 1;
  let far = 2;          // End of TDZ (for far)
}

The term "temporal" is used because the zone depends on the order of execution (time) rather than the order in which the code is written (position). For example, the code below works because, even though the function that uses the let variable appears before the variable is declared, the function is called outside the TDZ.

{
    // TDZ starts at beginning of scope
    const func = () => console.log(bar); // OK

    // Within the TDZ bar access throws `ReferenceError`

    let bar = 3; // End of TDZ (for bar)
    func(); // Called outside TDZ!
}

• The let and const variables exist in the TDZ from the start of their enclosing scope until they are declared.

• You could also say that the variables exist in the TDZ from the place they get bound (when the variable gets bound to the scope it's inside) until it is declared means when a name is reserved in memory for that variable.

{
    // This is the temporal dead zone for the age variable!
     // This is the temporal dead zone for the age variable!
    let age = 25;     //   No more TDZ
    console.log(age);
}

But in case of var won't do that. var is just default initialized to undefined unlike the other declaration.

Declaring and initializing of a variable-

Have a look at below example

function scopeExample() {

    let age;                // label 1
    age = 20;               // label 2
    let hands = 2;          // label 3
}

• Declaring a variable - we reserve the name in memory at the current scope. That is labelled 1 in above example.
• Initializing a variable - is setting the value of the variable. That is labelled 2 in above example

Why Temporal Dead Zone?

Makes it way easier to avoid and catch errors. Because using a variable that is set to undefined before it is actually declared can cause serious bugs that might be hard to find. So accessing variables before the declaration is bad practice and should be avoided. As we know, we can’t reassign const variables. So it will not be possible to set them to undefined first and then assign their real value later. Const should never be reassigned. And so it’s only assigned when execution actually reaches the declaration. And that makes it impossible to use the variable before.

How to avoid the issues the TDZ causes?

Always make sure you define your lets and const at the top of your scope.

Conclusion: Temporal dead zone in JavaScript

If we understand how variables, scope and variable declaration and initialization work. Then this blog helps us to understand what temporal dead zone in JavaScript is and how it works.

• As such, TDZ does not allow using variables before declaration.
• It's better to avoid using var because var variables can be used even before declaration.