Temporal Dead Zone

Open the project folder

Starter file code

The temporal dead zone is something which sounds more difficult than it actually is. And most of the concepts surrounding it have been covered previously.

This is the code in the project file:

console.log(name);
var name = 'Chris';

We know that a variable created with this var keyword can be accessed before it is declared. The variable is hoisted to the top of the scope.

Hositing recap

Also, we discovered when using the let and const keywords, this behaviour is not the same:

console.log(name);
let name = 'Chris'; // error

Another way to look at it would be to initialise the variable before we use it:

name = 'Chris';
console.log(name); // error
let name;

We still have an error since we are trying to access name too early, before initialisation. What about if we switched around lines 1 and 3:

let name;
console.log(name); // undefined
name = 'Chris';

If we do not assign a value to this variable before we use it, it will be initialised with a value of undefined.

So const, let, and var all get a value of undefined if we don’t set an initial value before we try to access the variable, the difference is var can be accessed before it is even declared.

What is the temporal dead zone?

How does this all relate to the temporal dead zone? Well, it is just a name we give to something we have already seen, when using const and let.

It's refers to a period of time, from when we enter any given scope, right up to when a variable is initialized, or accessible.

So, the variable may exist, but it is not yet initialized. And if this happens, it is said to be in the temporal dead zone, we cannot access it or use it how we want to.

Temporal dead zone examples

We know already this gives us an error:

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = 'Chris';

This is because from the beginning of the current scope we are entering the temporal dead zone:

// TDZ BEGINS
console.log(name);
let name = 'Chris';

Then when the variable is initialised, the current temporal dead zone ends, and the variable is now accessible:

// TDZ BEGINS
console.log(name);
let name = 'Chris'; // TDZ ENDS

Block scope example

And this happens for any scope. The start of the temporal dead zone could be the beginning of a block scope for example:

{ // TDZ BEGINS
console.log(name);
let name = 'Chris'; // TDZ ENDS
}

It may appear that the code order is the determining factor here, as the variable declaration appears after the console log. This is not the case. Earlier it was mentioned that the temporal dead zone is a period of time from when we enter any given scope, right up to when a variable is initialised.

Meaning it is time which is important not the code order. And the word temporal relates to time. We can see this if we wrap the log into a function:

{
  // TDZ BEGINS
  // 1. wrap log in function
  function getName() {
    console.log(name);
  }
  let name = 'Chris'; // TDZ ENDS
  // 2. call function
  getName();
}

The console log will work. Looking at the code order, the console log still happens before we declare the name variable, so it may be expected to throw an error.

This is not the case because the function is called outside the temporal dead zone, so the temporal dead zone is not the code order, it is the time it takes to make the variable accessible.

There are some complicated things to understand here, but it is important to know these concepts exist if you run into a related issue.

So how do we make our lives easier and minimise errors? A simple way is to put const and let variables at the beginning of their required scope. That way, they will always be ready to use when needed.