Concept Of Hoisting And TDZ(Temporal Dead Zone)

Introduction

In this article, I will explain how Hoisting and TDZ work in JavaScript. Hoisting and TDZ are all about declaring and using variables in JS. If you want to understand Javascript, you must know these basic things. These basic things help a lot to avoid the mistakes that could be done during logical writing. So let's start with the hoisting first.

Hoisting

Generally, Hoisting is about using a variable before it is declared. But the actual scene is that before the execution, code is scanned for every variable declaration, and a new property is created in the variable environment. It could be quite confusing, so let's clarify it with an example.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 10; // Assign 10 to x

element = document.getElementById("demo"); // Find an element 
element .innerHTML = 'This value is assigned before declaration: '+x; // Display x in the element   
var x;
</script>

</body>
</html>

In this example, we can see that the x is assigned 10 and used, and after that, we declare it. But if we look at the output, there is no error.

Output

This is the beauty of JavaScript. But if we remove the assignment to x and still try to get that value from the declaration section, let's see what happens.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
//x = 10; // Assign 10 to x

element = document.getElementById("demo"); // Find an element 
element .innerHTML = 'This value is assigned before declaration: '+x;           // Display x in the element   
var x=10;
</script>

</body>
</html>

Output

We can see that we are not getting that value after commenting on the initialization part. Value is still assigned, but when we try to access it before the initialization, we get undefined. So if we are going to use some value from a variable so we need to assign it first; we can declare it after that. But if we try the same thing with the let or const type variables. We can see that we are still not getting any errors on the console.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 10; // Assign 10 to x

element = document.getElementById("demo"); // Find an element 
element .innerHTML = 'This value is assigned before declaration: '+x;           // Display x in the element   
let x=10;
</script>

</body>
</html>

Output

we'll get an error that Can not access 'x' before initialization. The story of TDZ starts from here, So let's start with TDZ.

TDZ(Temporal Dead Zone)

TDZ is a block where let and const variables are not accessible before they are declared. If you want to use a variable before the declaration, you need first to assign that variable, which must be with the type of var; otherwise, you'll get an error like Can not access 'x' before initialization. So we can say that Hoisting works with var and function, not with let and const. To make it clear, I have a table that will explain both concepts.

In this table, we can use the function before the declaration. We can also use var before the declaration; its initial value is undefined. If we try with Let or Const, we'll get an error because of TDZ. When we use function expressions and arrow, it depends on what we are using; if we are using var, it's okay, but if we are using let or const, then it's not okay because It's a Temporal Dead Zone. We can not access them.

FAQs

Q. What is hoisting in JavaScript?

A. Hoisting is a mechanism in JavaScript that allows variables and functions to be declared before they are defined. In other words, the JavaScript engine moves variable and function declarations to the top of their respective scopes before code execution, so they can be used even before they are declared.

Q. What is the Temporal Dead Zone in JavaScript?

A. The Temporal Dead Zone is a behavior in JavaScript that occurs when variables declared with the let and const keywords are accessed before they are declared. The variables are still being created, and accessing them before they are fully initialized results in a reference error.

Q. How does hoisting work in JavaScript?

A. Hoisting moves function and variable declarations to the top of their respective scopes during the JavaScript compilation phase. However, only the declarations are moved, and not the initializations. This means that although a variable can be declared at the top of a scope, its value will still be undefined until it is initialized.

Q. What is the difference between var, let, and const about hoisting?

A. In terms of hoisting, the main difference between var, let, and const is that var declarations are hoisted to the top of the scope and initialized to undefined. At the same time, let and const declarations are also hoisted to the top of the scope but are not initialized until their actual declaration statement is executed. Additionally, var is function-scoped, while let and const are block-scoped.

Q. How does the Temporal Dead Zone affect let and const declarations?

A. The Temporal Dead Zone affects let and const declarations by preventing them from being accessed before they are fully initialized. Any attempt to access a let or const variable during the Temporal Dead Zone results in a reference error. This is because let and const variables are not hoisted with an initialized value like var variables and are not accessible until they have been fully declared.

Conclusion

Tstught usHoisting is an amazing feature of JavaScript that helps a lot during development, but most people get confused. This article has taught us about Hoisting and TDZ with multiple examples. I hope this article makes your concept more clear about Hoisting and TDZ.