let, const and the Temporal Dead Zone

Introduction

And as I promised in my previous blog that we have a trip with Temporal Dead Zone, and here it is. So, if you haven't understood Temporal Dead Zone and how to play with variables using keywords let and const yet. Don't worry, this blog is totally dedicated to let, const, and temporal dead zone, and believe me if you will read this blog with the whole heart, this is going to be very beneficial for you in your future interviews. So without any further due let's start our trip.

Starting with basics: var, let, and const

As let and const are almost similar I will explain this only with the help of var and let. So, below is our program with the same code but using variable keywords var and let. So, what do you think, what will be the answer?

//using `var` keyword
console.log(food);
var food = 'cooking';

//using `let` keyword
console.log(food);
let food = 'cooking';

In our first program (using var), of course, we will get undefined and why is that, because of hoisting, Right? If you don't know what hoisting is, please read my previous blog. Now, let's move to our next program i.e. using the let keyword for variable declaration. Here, we will get an error as Uncaught ReferenceError: Cannot access 'food' before initialization. Now let's understand why this error occurs with let(and const).

First thing first, let and const are block-scoped unlike var which is function-scoped. Now, let's understand the term function-scoped and block-scoped.

• Function-Scoped: var is a function-scoped which means if we declare a variable inside a function, we will not be able to access it from outside the function. So, var is only limited to function i.e. if we declare variables inside if and for, we can access it from outside of if as well as of for loop. Let's understand this with the help of an example -

var food = 'cooking';
console.log(food);

// function
function funcOne(){
    var food;
    console.log(food);
}
funcOne();

// if
if(true){
    var food;
    console.log(food);
}

// for-loop
for(var i = 1; i <= 3; i++){
    var food;
    console.log(food);
}

//OUTPUT : 
//cooking
//undefined
//cooking
//cooking
//cooking
//cooking

In the above program, we have declared four variables with the same name food, one in the global scope, one inside function funcOne, one inside if, and the last one inside a for loop. Also, we have initialized with value cooking only at the top i.e. at Global Scope. Now, when we run this code we will get undefined only when function funcOne is invoked because the scope of variable food inside function fucnOne lies only inside the { } curly braces of the function funcOne. So, it cannot access the value cooking we initialized at the top. And that's why it is known as function-scoped.

• Blocked-Scoped: let and const are blocked-scoped which means if we declare a variable using let or const inside any block( block means inside any { } braces), whether it is a function, an if or a for loop, we will not be able to access it outside its scope. Now, let's understand this with the help of an example. Below we have the same program as above but replaced let to var.

let food = 'cooking';
console.log(food);

// function
function funcOne(){
    let food;
    console.log(food);
}
funcOne();

// if
if(true){
    let food;
    console.log(food);
}

// for-loop
for(let i = 1; i <= 3; i++){
    let food;
    console.log(food);
}

//OUTPUT :
//cooking
//undefined
//undefined
//undefined
//undefined
//undefined

Now you see we get undefined to all the variables we have declared with let inside function funcOne, inside if, and also inside for loop. This is because, when we declare variables using let and const, JavaScript Engine assigns memory to it in a separate scope i.e. the variable is only accessible inside { } curly braces. And here also comes the concept of TEMPORAL DEAD ZONE, so let's get immersed into it.

The Temporal Dead Zone

So, what is Temporal Dead Zone? Here is the answer, Temporal Dead Zone is the time that starts from the beginning of its(variable) scope till the variable is declared. This is the time when a variable is dead i.e. if you try to access a variable in this time zone, you will find it useless, you will not be able to access it. But you will find Temporal Dead Zone only when you declare variables using let and const. So, let's understand this concept with the help of an example -

// **********************************************************************
// ******************** Temporal Dead Zone *****************************
// *************************** for ***************************************
// ************************* variable ************************************
// ************************** `food1` ************************************
// ********************************************************************** 
let food1 = 'food is cooking at top';
console.log(food1);


function funcOne(){
    // **********************************************************************
    // ******************** Temporal Dead Zone *****************************
    // *************************** for ***************************************
    // ************************* variable ************************************
    // *************************  `food2`  ***********************************
    // **********************************************************************
    let food2 = 'food is cooking inside funcOne';
    console.log(food2);
}
funcOne();

Note : *(asterisks) are given to visualize how (temporal dead zone)TDZ looks.

Here we have two variables food1 and food2 declared at top-level and inside function funcOne respectively. The scope of variable food1 is Global because it is declared at the very top level. So, its temporal dead zone starts from the very beginning and ends when it is being declared. And variable food2 is declared inside function funcOne so its scope will be only inside the curly braces { } of the function funcOne. Now, its temporal dead zone starts from the start of curly brace { and ends when it is being declared.
Now, when we try to access variables declared with let and const inside this temporal dead zone, you will not be able to access it, you are going to get a bunch of errors instead. Don't believe in me? let's do it then. Just move the console.log() in the temporal dead zone and see what happens.

// **********************************************************************
// ******************** Temporal Dead Zone *****************************
// *************************** for ***************************************
// ************************* variable ************************************
// ************************** `food1` ************************************
console.log(food1); // OMG! inside TDZ
// ********************************************************************** 
let food1 = 'food is cooking at top';



function funcOne(){
    // **********************************************************************
    // ******************** Temporal Dead Zone *****************************
    // *************************** for ***************************************
    // ************************* variable ************************************
    // *************************  `food2`  ***********************************
    console.log(food2);  //OMG! it is also inside TDZ
    // **********************************************************************
    let food2 = 'food is cooking inside funcOne';

}
funcOne();

Output in the console as :

 Uncaught ReferenceError: Cannot access 'food1' before initialization

You will get an error at the very first line because the variable is not accessible there. That's why it is preferred to use let and const in place of var to avoid bugs. And now to save our variables from the TEMPORAL DEAD ZONE, we must always try to declare it at the very top-level of its scope.

So, that's it guys for in this blog. I will be very glad if you let me know any suggestions/corrections in any of my blog articles. If you find this article helpful, say hi to me on linkedIn

Comments

[Patrick Wong]

Il need to read your previous blog to get more context but the TDZ is enlightening for me.