Skip to main content

Temporal Dead Zone – What Is TDZ in JavaScript?

A temporal dead zone (TDZ) is the area of a block where a variable is inaccessible until the moment the computer completely initializes it with a value.

note
  • A block is a pair of braces ({...}) used to group multiple statements.
  • Initialization occurs when you assign an initial value to a variable.

Suppose you attempt to access a variable before its complete initialization. In such a case, JavaScript will throw a ReferenceError.

So, to prevent JavaScript from throwing such an error, you've got to remember to access your variables from outside the temporal dead zone.

But where exactly does TDZ begin and end? Let's find out below.

Where Exactly Is the Scope of a Temporal Dead Zone?​

A block's temporal dead zone starts at the beginning of the block's local scope. It ends when the computer fully initializes your variable with a value.

Below are examples illustrating where a block's temporal dead zone starts and ends.

Example 1: TDZ ends once the computer fully assigns a value to bestFood​

{
  // bestFood's TDZ starts here (at the beginning of this block's local scope)
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  console.log(bestFood); // returns ReferenceError because bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  let bestFood = "Vegetable Fried Rice"; // bestFood's TDZ ends here
  // bestFood's TDZ does not exist here
  // bestFood's TDZ does not exist here
  // bestFood's TDZ does not exist here
}

Try Editing It

In the snippet above, the block's TDZ starts from the opening curly bracket ({) and ends once the computer initializes bestFood with the string value "Vegetable Fried Rice".

When you run the snippet, you will see that the console.log() statement will return a ReferenceError.

JavaScript will return a ReferenceError because we used the console.log() code to access bestFood before its complete initialization. In other words, we invoked bestFood within the temporal dead zone.

Example 2: How to access a variable outside the temporal dead zone​

Here is how you can access bestFood successfully after its complete initialization:

{
  // TDZ starts here (at the beginning of this block's local scope)
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  let bestFood = "Vegetable Fried Rice"; // bestFood's TDZ ends here
  console.log(bestFood); // returns "Vegetable Fried Rice" because bestFood's TDZ does not exist here
  // bestFood's TDZ does not exist here
  // bestFood's TDZ does not exist here
}

Try Editing It

In the snippet above, the console.log() statement successfully returned bestFood's content because we used console.log() outside the temporal dead zone.

Example 3: An uninitialized let variable defaults to undefined outside the TDZ​

{
  // TDZ starts here (at the beginning of this block's local scope)
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  // bestFood's TDZ continues here
  let bestFood; // bestFood's TDZ ends here
  console.log(bestFood); // returns undefined because bestFood's TDZ does not exist here
  bestFood = "Vegetable Fried Rice"; // bestFood's TDZ does not exist here
  console.log(bestFood); // returns "Vegetable Fried Rice" because bestFood's TDZ does not exist here
}

Try Editing It

You can see that the first console.log code in the snippet above returned undefined.

JavaScript returned undefined because we did not assign bestFood a value before using (invoking) it. As such, JavaScript defaulted its value to undefined.

Keep in mind that you must specify a value for a const variable while declaring it. Apart from this exception, all other temporal dead zone principles of let variables apply also to const. However, var works differently.

How Does Var's TDZ Differ from Let and Const Variables?​

The main difference between the temporal dead zone of a var, let, and const variable is when their TDZ ends.

For instance, consider this code:

{
  // bestFood's TDZ starts and ends here
  console.log(bestFood); // returns undefined because bestFood's TDZ does not exist here
  var bestFood = "Vegetable Fried Rice"; // bestFood's TDZ does not exist here
  console.log(bestFood); // returns "Vegetable Fried Rice" because bestFood's TDZ does not exist here
  // bestFood's TDZ does not exist here
  // bestFood's TDZ does not exist here
}

Try Editing It

When you run the snippet above, you will see that the first console.log statement will return undefined.

The console.log statement successfully returned a value (undefined) because JavaScript automatically assigns undefined to a hoisted var variable.

In other words, when the computer hoists a var variable, it automatically initializes the variable with the value undefined.

In contrast, JavaScript does not initialize a let (or const) variable with any value whenever it hoists the variable. Instead, the variable remains dead and inaccessible.

Therefore, a let (or const) variable's TDZ ends when JavaScript fully initializes it with the value specified during its declaration.

However, a var variable's TDZ ends immediately after its hoisting—not when the variable gets fully initialized with the value specified during its declaration.

Overview​

This article discussed what a temporal dead zone (TDZ) is. We also used examples to illustrate how TDZ works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article