The time frame in which access to the let and const declarations is prohibited is known as the Temporal Dead Zone (TDZ).

The region of a block known as a temporal dead zone (TDZ) is where a variable is unreachable until the point at which the computer fully initializes?it with a value. A block is a set of brackets ( {?} ), which are used to group several statements together. When you give a variable an initial value, this is known as initialization.

JavaScript developers are familiar with the hoisting of variables declared using var.

Let and const are two new keywords for declaring variables and constants in JavaScript's ES2015 version.

Variables declared with let and constants declared with const cannot be accessed prior to their declaration, in contrast to var, which can.

console.log(foo); // undefined
var foo = 123;

console.log(foo); // Error
let foo = 123;

You may conclude from this that let and const are exempt from hoisting, but that conclusion is false.

You might be surprised to learn that, like var, variables defined with let and constants declared with const are likewise hoisted; they are only hoisted in a different way than var variables are.

Let's examine some code that demonstrates how variables specified using the let keyword are also hoisted.

Code Example

let age = 50;

function printAge() {
  console.log(age);
  let age = 30;
}

printAge(); // Error

Even though the variable age is declared in the global scope, running the aforementioned code snippet results in an error. Because another age variable is declared inside the printAge method, the console.log statement inside the printAge function does not have access to that outside age variable.

The global age variable would have been tracked by JavaScript if the let variables hadn't been hoisted. However, as we can see from the code snippet's output, this is not the case.

This demonstrates that let-declared variables are also hoisted. The keyword const also fits this description.

Temporal Dead Zone

So why can't they be accessible prior to their declaration if the let and const are likewise hoisted? The idea of the Temporal Dead Zone contains the solution to this (TDZ).

Constants and variables declared using the let and const keywords are hoisted but are contained in a TDZ. This prevents them from being accessible during the sequential execution of the code before their declaration has been really executed.

The time frame in which access to the let and const declarations is prohibited is known as the Temporal Dead Zone (TDZ).

A?temporal dead zone (TDZ)?is the area of a block where a variable is inaccessible until the moment the computer completely initializes it with a value.

When the code execution enters the block containing the let or const declaration, there is a temporary dead zone that lasts until the declaration has been executed.

Temporal Dead Zone in the preceding code sample begins after the printAge function's opening parenthesis and lasts until the age variable is declared.

Take into account the following code example, which highlights an intriguing idea regarding the Temporal Dead Zone.

Code Example

function print() {
  function log() {
    console.log(age);
  }

  const age = 20;
  log();
}

print(); // 20

How can we determine age before it is declared?

Since console.log is contained within a different method that is invoked after the declaration of the age variable, age is really accessible after that. The declaration of the age variable has already been completed by the time it is accessed inside the log function.

In other words, it doesn't matter where the let variable or const constant is accessed; it matters when it is accessed. The area above the let or const declaration is not a part of the Temporal Dead Zone; time is.