Table of contents
1.
Introduction
2.
Scope of a Temporal Dead Zone
3.
Hoisting in Javascript
4.
Frequently Asked Questions
4.1.
Define Temporal Dead Zone.
4.2.
When does initialization occurs?
4.3.
What is a block?
4.4.
What is Hoisting?
4.5.
What happens when a user attempts to access a variable before its complete initialization?
5.
Conclusion
Last Updated: Mar 27, 2024

Temporal Dead Zone and Hoisting Behavior in JS

Author Prachi Singh
2 upvotes
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

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

  • A block can be defined as a pair of braces ({...}) used to accumulate multiple statements.
  • Initialization occurs when one assigns an initial value to a variable.

Suppose a user attempts to access a variable before its complete initialization. In such a scenario, JavaScript will subject a ReferenceError.

Scope of a Temporal Dead Zone

We will explain the scope of a Temporal Dead Zone with the following example.

{
  // bestPlace’s TDZ starts here (at the beginning of this block’s local scope)
  // bestPlace’s TDZ continues here
  // bestPlace’s TDZ continues here
  // bestPlace’s TDZ continues here
  console.log(bestplace); // returns ReferenceError because bestplace’s TDZ continues here
  // bestPlace’s TDZ continues here
  // bestPlace’s TDZ continues here
  let bestPlace = "Delhi"; // bestPlace’s TDZ ends here
  // bestPlace’s TDZ does not exist here
  // bestPlace’s TDZ does not exist here
  // bestPlace’s TDZ does not exist here
}
You can also try this code with Online Javascript Compiler
Run Code

In the snippet described above, the block’s TDZ starts from the opening curly brace ({) and ends once the computer initializes bestPlace with the string value "Delhi".

When users run the snippet, they will see that the console.log() statement will return a ReferenceError.

Complete Initialisation of bestPlace is described below.

{
  // TDZ starts here (at the beginning of this block’s local scope)
  // bestPlace’s TDZ continues here
  // bestPlace’s TDZ continues here
  // bestPlace’s TDZ continues here
  // bestPlace’s TDZ continues here
  // bestPlace’s TDZ continues here
  // bestPlace’s TDZ continues here
  let bestPlace= "Delhi"; // bestPlace’s TDZ ends here
  console.log(bestPlace); // returns "Delhi" because bestPlace’s TDZ does not exist here
  // bestPlace’s TDZ does not exist here
  // bestPlace’s TDZ does not exist here
}
You can also try this code with Online Javascript Compiler
Run Code

Hoisting in Javascript

Hoisting refers to JavaScript giving higher precedence to the declaration of variables, classes, and functions during a program’s execution.

Hoisting makes the computer process declarations before any other code.

Note: Hoisting does not mean JavaScript rearranges or moves code above one another.

Hoisting gives higher specificity to JavaScript declarations. Thus, it makes the computer read and process statements first before analyzing any other code in a program.

{
  // Declare a variable:
  let bestPlace = "Delhi";
  // Declare another variable:
  let myBestTrip = function () {
    console.log(bestPlace);
    let bestPlace = "Delhi";
  };
  // Invoke myBestTripl function:
  myBestTrip();
}
// The code above will return:
"Uncaught ReferenceError: Cannot access 'bestPlace' before initialization"
You can also try this code with Online Javascript Compiler
Run Code

Frequently Asked Questions

Define Temporal Dead Zone.

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

When does initialization occurs?

Initialization occurs when one assigns an initial value to a variable.

What is a block?

A block can be defined as a pair of braces ({...}) used to accumulate multiple statements.

What is Hoisting?

Hoisting makes the computer process declarations before any other code.

What happens when a user attempts to access a variable before its complete initialization?

Javascript will return a ReferenceError.

Conclusion

Congratulations on finishing the blog!! After reading this blog, you will grasp the concept of the Temporal Dead Zone and Hoisting.
Check out this problem - Redundant Braces

If you are preparing yourself for the top tech companies, don't worry. Coding Ninjas has your back. Visit this link for a well-defined and structured material that will help you provide access to knowledge in every domain.

Happy Learning!!

Live masterclass