What is the Temporal Dead Zone in JavaScript?

You may have heard this term get thrown around in JavaScript dev circles. No, it is not something the crew of the USS Enterprise encountered in Star Trek, although that would be really cool to watch!

No, the Temporal Dead Zone with regards to JavaScript is a special edge case which came from the introduction of a couple of new features in ES6.

To give a bit of background, consider this code:

function doSomething() {
  console.log(something);
  var something = 'test';
}

doSomething();

The output of the code above will be ‘undefined’. If you have been using JavaScript for a little while then that makes sense in a weird sort of way. Or, to put it another way, the output of ‘undefined’ would be expected. This has to do with the fact that in JavaScript, variables declared with the ‘var’ keyword are hoisted to the top of the execution context.

Hoisting? Execution context? What? So this speaks to those who may be new to JavaScript. JavaScript is admittedly a weird language, but I will explain these terms in detail.

So what is Hoisting? This refers to the concept in JavaScript that variables are moved to the top of the function they are in regardless of where they appear in the function. From the example above, I declared and initialized ‘something’ after I used it. The JavaScript compiler looks through all of that code above (I know, a whopping 5 lines) for variables and then “moves” them to the top, meaning that in the mind of the JavaScript compiler it looks like this:

function doSomething() {
  var something = undefined; <- Hoisted variable
  console.log(something);
  var something = 'test';
}

doSomething();

If the variable just shows up out of nowhere like my first example and it doesn't have a value assigned to it, it just assigns the undefined data type to it. That is why the output of the code is 'undefined'.

Enter ES6/ECMAScript 2015

In ES6, the 'let' and 'const' keywords were introduced to the language. Variables declared with the 'let' keyword are not scoped to the function they are in. They are scoped to the block that they are declared.

For those of you coming from another language, that makes sense right? Most programming languages are block-scoped. However, prior to the introduction of 'let', variables in JavaScript were function-scoped. This meant that any variables declared outside of a function are global to the entire application and variables declared within a function are local to that function.

Now with the new version of JavaScript, 'let' makes a variable behave just like they do in most common languages. There is a key difference though. They are not hoisted. With that in mind, let's revisit my trivial example from above using 'let' instead of var.

function doSomething() {
  console.log(something);
  let something = 'test';
}

doSomething();

The output of the code above is a ReferenceError. So this is normal right? This doesn't sound like something Lieutenant Commander Data would have to figure out. So what is the Temporal Dead Zone?

Well let's answer that with a final example:

function doSomething() {
  return something;
}
let something;
doSomething();

Guess what? The output is 'undefined'! This answers our question to what the Temporal Dead Zone is. The Temporal Dead Zone is a period of time between when a variable enters scope and when it is declared whereby it can't be accessed.

I know this was a lengthy answer, but it was necessary to explain because I felt it would actually allow you, as the reader, to understand it in a more thorough way.

It's also important to note that the 'const' keyword is subject to this as well.

Leave a Reply

Your email address will not be published.