Introduction

Hi all, before we actually dive deep into a very interesting topic which is the Temporal Dead Zone, it is very important to know the core concept of let vs var.

Before the introduction of let and const variables in ES6 there was just one variable till ES5 i.e var. While we talk about the difference between let vs var, it’s definitely the same for const as well. So now there are 3 variables in JS:

• var
• let
• const

1. The first and the most known difference between var and let is that, var is a function scope variable whereas let and const are block scope variables.
2. Another difference is that variables that are declared with var are attached directly to a global object that is a window in the browser environment, whereas in case of let the global object is not affected.
3. In the creation phase var is assigned undefined and can be accessed before any value is assigned to the variable. Whereas in case of let and const it is not possible to access those variables before any value is assigned initially.

What do I mean by function scope and block scope variables ?

When a variable is declared inside any block and we are still able to access that variable outside that block, then such variables are called function scope variables(Ex. var). Whereas a variable when declared inside any block and we are unable to access it outside that block, then such variables are called block scope variables(Ex. let or const).

Sounds confusing 😅, let's have a look at the example below :

• Example of Function Scope

var myVar = 20;
if(true) {
  var myVar = 40;
  console.log(myVar); //40
}
console.log(myVar); // 40

• Example of Block Scope

let myVar = 20;
if(true) {
  let myVar = 40;
  console.log(myVar); //40
}
console.log(myVar); // 20

So let's now dive deep into what actually is the Temporal Dead Zone(TDZ) with the help of example:

function TDZ(){
    console.log(myVar); //undefined
    console.log(myLet); //Will give a Reference Error
    console.log(myConst); //Will give a Reference Error

    var myVar = "Hello Var";
    let myLet = "Hello Let";
    const myConst = "Hello Const";
}
TDZ();

In the above code block when we try to access myVar variable before initialization we get undefined as the output whereas when we try to access myLet variable we will get a Reference Error.

This is the condition where the Temporal Dead Zone(TDZ) occurs. The zone between accessing the variable myLet and initializing it is called the Temporal Dead Zone.

To get a better understanding of TDZ we should know about Hoisting in Javascript.

Javascript engine runs through the code in two phases:

• Creation Phase
• Execution Phase

Hoisting is nothing but Javascript’s default behaviour of moving declarations to the top. The variables and function declarations are put into memory during the compile phase. When we declare var variable, javascript will initialize undefined as a default value, but this is not the case with let and const variables. Although in the creation phase memory is allocated to let and const variables but nothing is initialized to those variables. So when we try to access let and const variables before initialization we get Reference Error.

Protip : In order to avoid the TDZ condition we should declare let and const variables on the top of our program and avoid accessing variables before initialization.

Hope you enjoyed the read. Please post any feedback, questions, or requests for topics. I would also appreciate 👍🏻 if you like the post, so others can find this too.