What is the temporal dead zone?
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;
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 ofundefined
.- while
let
,const
didn't go throw the initial process, so their values are still inaccessible, although they already declared. whats put them intemporal dead zone
So in shortly:
hoisting process:
var
,let
,const
Initialisation process:var
let
and const
have two broad differences from var
:
- They are block scoped.
- Accessing a
var
before it is declared has the resultundefined
; accessing alet
orconst
before it is declared throwsReferenceError
:
console.log(aVar); // undefined
console.log(aLet); // Causes ReferenceError: Cannot access 'aLet' before initialization
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.