Part 9 : let, const and Temporal Dead Zone in JS 🧐

Prerequisite:

1. Hoisting in javaScript
2. “this” keyword in JS

In this article, we’ll cover : :

1. What is Temporal Dead Zone?
2. Are let and const declaration hoisted?
3. Difference between Syntax Error / Reference Error and Type Error?

— — — — — — — — — — — — — — — — — — — — — — — — — — —
Are let and const declaration hoisted?

Answer is : YES 👍🏼

But they are hoisted very differently then var declarations.
In interviews, you can say that these are in Temporal Dead Zone.

Let’s understand taking an example:

let a = 10;
var b = 100;

In previous hoisting article, we learn that we can access variable “b” even before we have initialised it. Like below

console.log(b);
let a = 10;
var b = 100;

Reason: Because in JS, memory has been allocated even before any line of code is executed. So, we can access variable “b” even before initialising or declaring.

Output :

output

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: What If I try to access variable “a” in same way ? As it is hoisted , Will it give undefined too?

Answer is NO 👎🏼

console.log(a);
let a = 10;
var b = 100;

Output:

SO, it is saying “Reference Error: Cannot access ‘a’ before initialisation” . i.e you can access “a” only after you assigned or initialised some value to “a”.

Let’s try below code:

let a = 10;
console.log(a);
var b = 100;

Output:

Now, you can see we were able to access “a”. console prints value 10.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: How to know whether any variable is hoisted or not??

Let’s see that in browser, add a debugger:

Now, If you see both variables “a” and “b” are in scope with value undefined but “a” is under “script” where “b” is in Global memory space.

To summarise: “let” and “const” type variables will be allocated memory but that is not in Global Space. They are hoisted but not stored in global space. And this memory is not accessible until you put some value into that.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Question: What is Temporal Dead Zone??

It is the time since when let variable was hoisted and till it is initialised some value.

So, whenever you try to access any let or const variable in Temporal Dead Zone, it gives you Reference Error.

console.log(a);
let a = 10;
console.log(a);
var b = 100;

So, In above example, until Line 2 : let a = 10; . “a” is in Temporal Dead Zone and gives you Reference Error at Line 1.
After Line 2, at Line 3: you can access variable a.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
In previous article of “this” keyword in JS, we tried to access variables using “this” and “window” keywords. Let’s just try that too.

As you can see above, we are not able to access “a” using “window” and “this” keyword. It keeps giving “undefined”.

Reason: “this” and “window” represents global space and memory allocated to “a” was different then global object. So, this shows, “let” is strict then “var”.

— — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: Can we re-declare “let” variable?

Answer is NO 👎🏼

let a = 10;
let a = 100;

Output:

SO, it is saying “Syntax Error: Identifier ‘a’ has already been declared” .

Also, JS will not run any line of code if it sees redeclaration. It will not reach any line of code.

what If I try below ?

let a = 10;
var a = 100;

Output:

Same again: “Syntax Error: Identifier ‘a’ has already been declared” . “let” variable can’t be declared again with same name again in same scope.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: Can we re-declare “var” variable?

Answer is YES 👍🏼

var a = 10;
var a = 100;

No error when you run code.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: Can we re-declare “const” variable?

Answer is NO 👎🏼

var a = 10;
const b= 100;
const b= 1000;

Output:

“const” variable can’t be declared again with same name in same scope.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

What If I run below code?

let a;
const b;
var c;

a = 10;
b = 100;
c = 1000;

SO, it is saying “Syntax Error: Missing Initializer in const declaration.” This means “const” variable needs to be intialised and declared in same line.

“const needs to be initialised and declared in same line”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

What If I try to assign some value again to “const” variable?

let a = 10;
const b = 100;


a = 20;
b = 200;

SO, it is saying “Type Error: Assignment to constant variable.” You can not assign value again to “const” type variable.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Now, As we have three different ways to declare a variable using let, var and const.

Which one we should use?

1. const : whenever you put some value which is not going to change later, use const.
2. let: As let has Temporal dead zone and you won’t run into unexpected errors.
3. var: Try to put it aside and not use.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

How to avoid Temporal Dead Zone errors?

Try to put all declaration and initialisation on top of scope. This will minimise unexpected errors when logic get called.

If you still have any queries related to hoisting of var, let and const. Please write down in comments.

⭐️Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job