What is the temporal dead zone?

Question

I've heard that accessing let and const values before they are initialized can cause a ReferenceError because of something called the temporal dead zone.

What is the temporal dead zone, how does it relate to scope and hoisting, and in what situations is it encountered?

Answer 1

let and const have two broad differences from var:

1. They are block scoped.
2. Accessing a var before it is declared has the result undefined; accessing a let or const before it is declared throws ReferenceError:

console.log(aVar); // undefined
console.log(aLet); // causes ReferenceError: aLet is not defined
var aVar = 1;
let aLet = 2;

It appears from these examples that let declarations (and const, which works the same way) may not be hoisted, since aLet does not appear to exist before it is assigned a value.

That is not the case, however—let and const are hoisted (like var, class and function), but there is a period between entering scope and being declared where they cannot be accessed. This period is the temporal dead zone (TDZ).

The TDZ ends when aLet is declared, rather than assigned:

//console.log(aLet)  // would throw ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

This example shows that let is hoisted:

let x = 'outer value';
(function() {
  // start TDZ for x
  console.log(x);
  let x = 'inner value'; // declaration ends TDZ for x
}());

Credit: Temporal Dead Zone (TDZ) demystified

Accessing x in the inner scope still causes a ReferenceError. If let were not hoisted, it would log outer value.

The TDZ is a good thing because it helps to highlight bugs—accessing a value before it has been declared is rarely intentional.

The TDZ also applies to default function arguments. Arguments are evaluated left to right, and each argument is in the TDZ until it is assigned:

// b is in TDZ until its value is assigned
function testDefaults(a=b, b) { }
testDefaults(undefined, 1); // throws ReferenceError because the evaluation of a reads b before it has been evaluated.

The TDZ is not enabled by default in the babel.js transpiler. Turn on "high compliance" mode to use it in the REPL. Supply the es6.spec.blockScoping flag to use it with the CLI or as a library.

Recommended further reading: TDZ demystified and ES6 Let, Const and the “Temporal Dead Zone” (TDZ) in Depth.

Answer 2

Hoisting:
let,const,var are all get hoisted process.
(whats mean they go upper and declare in the top of the scope.)

Initialisation:

• var go also through the initial process, and get initial value of undefined.
  
• while let,const didn't go throw the initial process, so their values are still inaccessible, although they already declared. whats put them in temporal dead zone

So in shortly:

hoisting process: var, let, const
Initialisation process: var

Answer 3

In case of let and const variables, Basically, Temporal Dead Zone is a zone

"before your variable is declared",

i.e where you can not access the value of these variables, it will throw an error.

ex.

let sum = a + 5;        //---------
//some other code       //         | ------>  this is TDZ for variable a
                        //         |
console.log(sum)        //---------
let a = 5;

above code gives an error

the same code will not give an error when we use var for variable 'a',

ex.

var sum = a;                            
console.log(sum)     //prints undefined
var a = 5;