Temporal Dead Zone (TDZ) and Hoisting in JavaScript

Temporal Dead Zone and Hoisting

Temporal Dead Zone (TDZ) and Hoisting in JavaScript:

Temporal Dead Zone:
===================

Area of a block where the javascript variable is inaccessible untill the moment the computer completely intialised.

Block is a pair of braces used to group multiple braces.

Initialisation means: assigning a value to a variable.

Javascript will through a Reference error when we access the variable from outside the temporal Dead zone.

Temporal dead zone for a  varaible start when the block level start and end when the varaible is assigned with a value.

For let and const, javascript won't initialise the variable untill it declare. For const variable we need to initialise at the time of declaration.

For the let variable, javascript will intialise with undefined by default.


{
  // bestFood’s TDZ starts here (at the beginning of this block’s local scope)
  // bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  console.log(bestFood); // returns ReferenceError because bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  let bestFood = "Vegetable Fried Rice"; // bestFood’s TDZ ends here
  // bestFood’s TDZ does not exist here
  // bestFood’s TDZ does not exist here
  // bestFood’s TDZ does not exist here
}

{
  // TDZ starts here (at the beginning of this block’s local scope)
  // bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  // bestFood’s TDZ continues here
  let bestFood; // bestFood’s TDZ ends here
  console.log(bestFood); // returns undefined because bestFood’s TDZ does not exist here
  bestFood = "Vegetable Fried Rice"; // bestFood’s TDZ does not exist here
  console.log(bestFood); // returns "Vegetable Fried Rice" because bestFood’s TDZ does not exist here
}


Hoisting in javascript:
=======================
Javacript will give higher precedence to declaration of variable, function, classes during execution. 
So the computer read and process the declaration first before other code execution.

Javascript will automatically assign undefined to hoisted var variable. If we declare a var variable in the  middle of code. Javacript will hoisted the var variable in first and assign with undefined to that variable.


{
  // bestFood’s TDZ starts and ends here
  console.log(bestFood); // returns undefined because bestFood’s TDZ does not exist here
  var bestFood = "Vegetable Fried Rice"; // bestFood’s TDZ does not exist here
  console.log(bestFood); // returns "Vegetable Fried Rice" because bestFood’s TDZ does not exist here
  // bestFood’s TDZ does not exist here
  // bestFood’s TDZ does not exist here
}