Temporal Dead Zone (TDZ) in JavaScript
Tags: webdev, javascript, programming, beginners
Published: 2022-06-18 05:58:24

> _This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!_
> 👉 [Click Here](https://devwebbytes.blogspot.com/2023/08/temporal-dead-zone-tdz-in-javascript.html)

## Introduction

A temporal dead zone is the area of a block where a variable is inaccessible until the computer completely initializes it with a value.
- **Block** is a pair of braces (`{...}`) used to group multiple statements.
- **Initialization** occurs when you assign an initial value to a variable.

**_Temporal Dead Zone_** is the period of time during which the `let` and `const` declarations cannot be accessed. 

Example:

![Temporal Dead Zone ex.1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztnljylna99si7jt3n5l.png)

Before Stepping deep into this concept I would recommend you to know about <a href="https://dev.to/abidullah786/hoisting-in-javascript-30b1">Hoisting in JavaScript</a>.



let and const have two broad differences from var:

- They are block-scoped.

- Accessing a `var` before it is declared has the result undefined; accessing a `let or const` before it is declared throws `ReferenceError:`

![Temporal Dead Zone ex.2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m2ny5umvkeqf0we5mgw.png)


## Where exactly does the TDZ begin and end?

The above example shows that `let` and `const` variables are not accessible before they are initialized with some value, and the phase between the starting of the execution of the block in which the `let` or `const` variable is declared till that variable is being initialized is called Temporal Dead Zone for the variable.
In other words, 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.

And during this zone JavaScript will always through a reference error if anyone tries to access those variables.

Example:

![Temporal Dead Zone ex.3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uj9ozp238io7krm1v5iy.png)


**Above Code Result:** JavaScript will return a `ReferenceError` because we used the console.log() code to access `age` before its complete initialization. In other words, we invoked `age` within the temporal dead zone.

**Start and End of TDZ:** In the above example, Temporal Dead Zone starts after the opening parenthesis of the printAge function and continues until after the declaration of the age variable.


The _Temporal Dead Zone_ is not about where, but about when the `let` variable or `const` constant is accessed. Temporal Dead Zone relates to time, not the space above the declaration of let or const.


![Temporal Dead Zone ex.4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl034985evzc5u6vbso6.png)


In above example before calling to log() the age constant is declared and initialized so it is accessible in log function.


## Conclusion: 

The most efficient way to overcome the errors of the _temporal dead zone_ is to initialize the variables at the top of the scope so that when our code starts running it completes the initializing part at first and then uses those variables otherwise you can run into a lot of unexpected errors in JavaScript code.




Exploring new concepts in #JavaScript and sharing with others is my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on <a href="https://twitter.com/abidullah_786">Twitter</a>, <a href="https://www.linkedin.com/in/abidullah786/">Linkedin</a>and <a href="https://github.com/abidullah786">GitHub</a>!