Developers often have a love-hate relationship with JavaScript because sometimes it doesn't work as expected. Learning JavaScript fundamentals and its quirks can assist developers in debugging and writing clean code. Temporal Dead Zone(TDZ) is one of the most exciting topics in JavaScript. Knowing this can make your life as a developer less stressful when you start to learn code. After reading this blog, you will be one step closer to becoming a Rockstar Developer 🎸😎.
Before we get started I would expect you to know the Execution Context and Hoisting, if not I would recommend you to watch Execution Context and Hoisting videos by Akshay Saini on youtube before we start.
First of all, let’s simplify the term: Temporal — lasting only for some time or temporary Dead — one which is dead for a certain time Zone — zone or area in which something is dead. This is not some apocalypse or a zombie movie, but straight out of ES6.
In JavaScript, the hoisting of variables declared with var is well known among JavaScript developers. Javascript’s ES2015 version introduced two new keywords to declare variables and constants: let and const. Unlike var, which can be accessed before it is declared, variables declared with let and constants declared using const cannot be accessed before their declaration. Let's see the code below.
console.log(a); // Undefined
console.log(b); // ReferenceError: Cannot access 'b' before initialization
console.log(c); // ReferenceError: Cannot access 'c' before initialization
var a = "Var";
let b = "Let";
const c = "Const";
You can clearly see that variable declared with var keyword returns undefined whereas the variable declared with let and const are throwing errors. This might lead you to think that hoisting doesn’t apply to let and const; that is an incorrect assumption. This might come as a surprise, but similar to var, variables declared with let and const are also hoisted, it is just that how they are hoisted is different from how var variables are hoisted.
Variables declared using let and the constants declared using const are hoisted but are in a TDZ. This prevents them from being accessed before their declaration has actually been executed during the step-by-step execution of the code. You may be confused now but I'll make it simple to understand what TDZ is.
Temporal Dead Zone
Temporal Dead Zone is the period of time during which the let and const declarations cannot be accessed. Temporal Dead Zone starts when the code execution enters the block which contains the let or const declaration and continues until the declaration has been executed.
Since let and const are block scope variables, the point from where the block is started to the point let/const are defined, this whole point is known as Temporal Dead Zone for those variables. Why? because, unlike var, const and let are practically dead or nonexistent till the point they are defined. Hence the zone is known as TDZ for our block scope variable. If you try to access the variable in TDZ, you will get the reference error as above.
To make the concept clear look at the code below to know how TDZ is defined:
{
var a = 10 ; // Temporal Dead Zone for b and c
console.log(a); // Temporal Dead Zone for b and c
console.log(b); // Temporal Dead Zone for b and c
let b = 5; // Temporal Dead Zone for c
console.log(c); // Temporal Dead Zone for c
const c = 5; // No Temporal dead zone
}
This my friend, is called Temporal Dead Zone. Hope this make your doubts over TDZ clear and will be able to explain it to others😎. Happy coding.
If you loved this article and love to read more about different programming topics that are beginner friendly. Please follow me here and on Twitter.