let, const and the Temporal Dead Zone
Tags: javascript, webdev, beginners, temporaldeadz
Published: 2022-02-24 05:34:23

## Introduction
And as I promised in my [previous blog](https://dev.to/sobitp59/hoisting-in-javascript-c3o) 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?

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

```

```javascript
//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](https://dev.to/sobitp59/hoisting-in-javascript-c3o). 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 -

```javascript
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`.

```javascript
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 -

```javascript
// **********************************************************************
// ******************** 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.

```javascript
// **********************************************************************
// ******************** 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 : 

```javascript
 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](https://www.linkedin.com/in/sobit-prasad/)