What is the Temporal Dead Zone (TDZ) in JavaScript?

What is the Temporal Dead Zone (TDZ) in JavaScript?

What is the Temporal Dead Zone (TDZ) in JavaScript? In ECMAScript 6 (ES6), accessing a let or const variable before its declaration (within its scope) causes a ReferenceError . The time span when that happens, between the creation of a variable's binding and its declaration, is called the temporal dead zone. The let and const variables exist in the TDZ from the start of their enclosing scope until they are declared.

I know Temporal Dead Zone sounds like a sci-fi phrase. But it's helpful to understand what the terms and concepts you work with everyday (or want to learn about) mean.

Strap in, because this gets complicated.

Are you aware that in JavaScript we can add { } to add a level of scope wherever we want?

So we could always do the below:

{ { { { { { var madness = true } } } } } }

Hopefully, you don't see this in production code!

I've included this detail to make sure that the upcoming examples makes sense (as I didn't want to assume that everyone knew it).

Before ES6 there was no other way to declare variables other than var. But ES6 brought us let and const.

let and const declarations are both block-scoped, which means they are only accessible within the { } surrounding them. var, on the other hand, doesn't have this restriction.

Here's an example:

let babyAge = 1;
let isBirthday = true;

if (isBirthday) {
    let babyAge = 2; 
}

console.log(babyAge); // Hmmmm. This prints 1

Two unique variables, with different values.

The above has occurred because the re-declaration of babyAge to 2 is only available inside the if block. Beyond that, the first babyAge is used. Can you see that they are two different variables?

In contrast, the var declaration has no block scope:

var babyAge = 1;
var isBirthday = true;

if (isBirthday) {
    var babyAge = 2; 
}

console.log(babyAge); // Ah! This prints 2

One variable with it's value re-declared.

The final salient difference between let / const and var is that if you access var before it's declared, it is undefined. But if you do the same for let and const, they throw a ReferenceError.

console.log(varNumber); // undefined
console.log(letNumber); // Doesn't log, as it throws a ReferenceError letNumber is not defined

var varNumber = 1;
let letNumber = 1;

They throw the error all because of the Temporal Dead Zone.

Temporal Dead Zone explained

This is what the TDZ is: the term to describe the state where variables are un-reachable. They are in scope, but they aren't declared.

The let and constvariables 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 (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!
    // This is the temporal dead zone for the age variable!
     // This is the temporal dead zone for the age variable!
    let age = 25; // Whew, we got there! No more TDZ
    console.log(age);
}

The temporal dead zone captured and catalogued.

You can see above that if I accessed the age variable earlier than its declaration, it would throw a ReferenceError. Because of the TDZ.

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

javascript es6 programming developer web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

9 ES6 Features Every JavaScript Developer Should Know

ES6 brings more amazing features to the JavaScript language. So without any further ado, let’s dive right in to see what are they and how they can help you write code more efficiently.

JavaScript ES6 Basics in 15 Minutes

ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript. ES6 Introduced an awesome easy syntax to write Javascript, it also has some extra useful functions that help you in your development process and makes things easier for you as a Developer.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.