Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
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
Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

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
}

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
}
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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"

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!!

Previous article
Implement StopWatch in vanilla JS and show time in HH: MM: SS format
Next article
What are Differences Between Cookie, Local Storage, and Session Storage
Live masterclass