Let Understand Temporal Dead Zone

#javascript #tdz #temporaldeadzone

Before understanding Temporal Dead Zone. We have to understand.
What is the difference between declaring and initialising?

What is Declaring?

Let's take a small code

function example() {
    let age; // 1 line
    age = 20; // 2 line
    let hands = 2; // 3 line
}

In the above example, we declare the age variable with the "let" keyword.in line 2, we assign value to age. It is called initialising. Before ES6 there is no other way to define a variable.ES6 came with let and const. let and Const are both blocks scoped.

Now What is Block Scoped?
let and const both access within the { } enclosed them. On another side, "var" has no restriction.

Let's take simple code

let boyAge= 18;
let isPartyToday = true;

if (isPartyToday) {
    let boyAge = 6; 
}

console.log(boyAge); // This print 18

Above code, I am initialising BoyAge two times. When we print boyAge then we have output is 18 because boyAge have 6 age that is wrapped with {} symbols. so we can not get output 6.

in case of var let take one sample code and see what will happen.
Let's take one simple code

var boyAge= 18; // line 1
var isPartyToday = true; // line 2

if (isPartyToday ) { // line 3
    var boyAge = 6;  // line 4
}  // line 5

console.log(boyAge); // This print 6

In the above code, we initial our boyAge two time .That Program will give us 6.because of at the last of line number 4 . We assign value is 6.

Notes:
if we accesss variable before declared then it will show undefined.But if you do with let and const.They throw a ReferenceError

Let see some code:

console.log(varNumber); // undefined
console.log(letNumber); // it throws a ReferenceError letNumber is not defined

var varNumber = 1;
let letNumber = 1;

In above code, We can see clear that letNumber variable showed referenceError.

Now move to main Topic that is Temporal Dead Zone

There are a few questions about Temporal Dead Zone

Let's check question

What is Temporal Dead Zone?

a. The let and const variables exist in the TDZ from the start of their enclosing scope until they are declared.
b. The only difference between const and let is that when they are hoisted, their values don't get defaulted to undefined.

{
    // Both the below variables will be hoisted to the top of their scope!
    console.log(typeof nothing); // Prints undefined
    console.log(typeof name); // Throws an error, cannot access 'name' before initialization

    let name = "rahul";
}

The above code is proof that let is clearly hoisted above where it was declared, as the engine alerts us to the fact. It knows name exists but we can't access it before it is initialized.

When variables get hoisted, var gets undefined initialized to its value by default in the process of hoisting. let and const also get hoisted, but they don't get set to undefined when they get hoisted.

And that is reason we have the TDZ. Which is why it happens with let and const but not var.