# 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:

![dev_console.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630481637692/WXAkiLSo0.png)

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](https://www.geeksforgeeks.org/javascript-hoisting/#:~:text=In%20JavaScript%2C%20Hoisting%20is%20the,scope%20is%20global%20or%20local.). 

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.

<center>![](https://cdn.hashnode.com/res/hashnode/image/upload/v1630483384914/JS0zoVqZG.gif)</center>

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**. 

![dev_console1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630486477339/WnULAyIRD.png)

![dev_error.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630486487477/kOLcgnE1S.png)


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 :).

<center>![happy_coding.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1630484342451/nXAjF1gZW.jpeg)</center>

Adios Amigos!! 

### **References:**

Must Watch youtube video: [https://www.youtube.com/watch?v=BNC6slYCj50](https://www.youtube.com/watch?v=BNC6slYCj50) 

Really thorough article:  [https://www.freecodecamp.org/news/what-is-the-temporal-dead-zone/](https://www.freecodecamp.org/news/what-is-the-temporal-dead-zone/) 

