Temporal Dead Zone
T.D.Z which stands for Temporal Dead Zone having a declared meaning in itself. Temporal Dead Zone sounds like a sci-fi phrase, but we should come across these three magical words to understand what the terms and concept we work with everyday. So before moving ahead let’s deep dive into these three words which are Temporal, Dead and Zone.
Temporal which indicates something like temporary, the word dead which means somehow lifeless state, and zone denotes an area which means in programming world related to memory or it can be considered as the time period or phase. So combining all these three terms narrates that some entity is temporarily in a lifeless or inactive state and can not be used for any kind of work. To understand this topic, one must have knowledge about let and const keyword in JavaScript to get it wisely. We must have a slight look over let and const and their scope in this particular section !
Const and let declarations both have block scoped, it means they are only accessible within the { } surroundings; var has no such restriction and so it is defined in a function scope.
<script>
let age = 5;
let birthday= true;
if(birthday){
let age = 6;
}
console.log(age); // 5
</script>
its output is 5 because the re-declaration of age to 6 is only available inside the curly braces. Hence “let” keyword has a block scope.
Likewise :
<script>
var age = 5;
var birthday= true;
if(birthday){
var age = 6;
}
console.log(age); // 6
</script>
now its output is 6, this is because “var” keyword has a global scope and it accesses the re-initialization of variable with different value.
DECLARATION & INITIALIZATION
Get AJIT SHARMA’s stories in your inbox
Join Medium for free to get updates from this writer.
Declaration of a variable states that we are allocating memory for that variable, while initialization states that we are assigning some value to the variable.
Again coming to TDZ, you might be thinking that why there is need to access any variable before initialization ?? Its true and is a wrong practice but has a specific reason of letting the developers write good code and make debugging easy in regard of let and const keyword.
Let’s us understand TDZ closely :
<script>
console.log(x);// undefined
var x= 6;
console.log(x); //6
</script>
Here global execution context is created and memory is allocated to x; means x got a place in memory and JS engine puts undefined, now thread execution phase starts during this console.log statement executes ans prints the value store in x, which is undefined.
Now in the next line there is x assigned to 6, and the undefined value of x gets replaced by 6.
Now using the some code in regard of let and const :
<script>
console.log(x);
console.log(z);
var x=6;
let z = 4;
console.log(x);
console.log(z);
</script>
// undefined
// referenceError : can’t access z before initialization
Again first of all the global execution context will be created, and the memory allocation phase starts, during this the variable x puts undefined there. Sooner z gets a space in different place of memory and same as x undefined will be assigned as value. Now the thread execution phase starts, during this console.log(x) statement executes ans prints the value of x, which is undefined.
Coming to the next line, there is console.log(z) javaScript will throw reference error in this case and program will be stopped(causing tdz).
“So we can say that TDz is the time since when this let variable was hoisted and till it is initialized some value, the time between them is known as Temporal Dead Zone”
Thank you !
