Amandeep's Blog

Temporal Dead Zone (TDZ) in javascript

Amandeep's photo
Amandeep
·

3 min read

What is Temporal Dead Zone (TDZ)

A temporal dead zone (TDZ) is the area of a block or scope where a variable can not be accessed until the computer completely initializes it with a value.

What is a Block or Scope ?

A block is a pair of braces "{...}" used to group multiple statements in a single block or scope.

If we try 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, we need a clear concept of temporal dead zone.

Where Exactly Is the Scope of a Temporal Dead Zone?

A block’s temporal dead zone starts from the beginning of the block’s local scope. It ends when the computer fully initializes our variable with a value.

Example :- 

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

In the code snippet above, TDZ starts from the opening curly bracket "{" and ends once the computer initializes bestFood with the string value "Success".

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 the variable Hardwork before its complete initialization. In other words, we invoked hardwork within the temporal dead zone.

However, here is how you can access the variable "Hardwork" successfully after its complete initialization:

{
  // Hardwork TDZ starts here (at the beginning of this block’s local scope)
  // Hardwork TDZ continues here
  // Hardwork TDZ continues here
  // Hardwork TDZ continues here
  // Hardwork TDZ continues here
  // Hardwork TDZ continues here
  let Hardwork = "Success"; // Hardwork TDZ ends here
  console.log(Hardwork); // returns "Success" because Hardwork TDZ does not exist here
  // Hardwork TDZ does not exist here
  // Hardwork TDZ does not exist here
}

Here's a catch

Since we know there are mainly three types of variable declarations in javascript "let, const, var"

TDZ for "let and const" are different from TDZ for "var".

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.

let me walk you through an example

{
  // Hardwork TDZ starts and ends here
  console.log(Hardwork); // returns undefined because Hardwork TDZ does not exist here
  var Hardwork = "Success"; // Hardwork TDZ does not exist here
  console.log(Hardwork); // returns "Success" because Hardwork TDZ does not exist here
  // Hardwork TDZ does not exist here
  // Hardwork TDZ does not exist here
}

When we run the snippet above, we 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.

temporal-dead-zone