Javascript Temporal dead zone demystified!

Superficial Knowledge breeds arrogance, true knowledge induces humility

So, I was watching some random interview videos of backend development in Nodejs and I came across this term Temporal Dead Zone. My immediate reaction was like "huh, what is this?? looks interesting!". Naturally, I stopped the video & googled this term, turns out it was just a fancy term for something obvious for experienced javascript developers :p.

Let me give some context to all those readers who are scratching their heads like me(Unfortunately, I am also a newbie js developer :)). Whenever a js script is executed whether it is inside your browser or on your server, it doesn't matter where it is, an execution context is created. So, what is this execution context? It is essentially how a js program is compiled and executed. A js program's execution involves 2 phases: The first phase is where our variable environment(variables, method declaration, etc) is initialised(only memory space is reserved in this phase actual assignments of values doesn't happen) & the second phase is known as a thread of execution. In the second phase, the js engine actually does all the assignment of variable values, calls the functions and executes the code inside them using a call stack.

Let's talk about variables in javascript. In js, we can make variable declarations using 3 keywords, i.e; var, let & const. Variables declared using the keyword var are stored in the same memory space of the actual js script execution while in the case of let and const the variables are defined in different memory spaces. Here's a practical example of what I am trying to say:

In the above screenshot, we can clearly observe that variable defined using let is declared in a separate memory space(Script) while var declarations are stored in global memory space. In order to understand why this happens in javascript, y'all should read the concept of Hoisting in JS.

So, basically during the creation phase of the execution context, the variables are hoisted. let and const declarations are hoisted in separate space than var declarations. (Note: Many js developers think that let and const declarations are not hoisted but they are actually hoisted, just in different memory space, hence: not accessible until initialised)

Now, I would define the temporal dead zone as:-

The time since the let or const variable was hoisted till the moment it was initialised.

Yeahhh! that's it. That is all there is to it. Pretty easy huh :). Okay so now I know what it is but what if I choose not to give a shit about it, what can happen at worst?? My dear javascript developers if you don't respect this little concept then you might end up in a lot of misery of code debugging. Let's say you declared a variable using let and const and tried to reference it before even initialising it then boom bam!!! You will observe a nice little red line in your console shouting Reference error.

In the above attachment, we can clearly observe that we are trying to log a before initialising it so, it was throwing a reference error. In this case, if we were to swap lines 1 and 3 then the zone between those lines would essentially be referred to as the temporal dead zone of a. So here's my advice use let and const declarations very carefully but again use them as much as possible for their obvious advantages :).