Unraveling JavaScript: A Deep Dive into Hoisting, Temporal Dead Zone, and Variable States

In below I have sweet and simple 2 lines of code. But I can guranty you that It will either confused a lot (as because you ignored the underline principle of JS) or comfort you.

But it has fully loaded knowledge concepts as below

• Hoisting
• Temporal dead Zone
• variable (undeclare, uninitialized, undefine) (Bonus)

My contradicting Statement
as like var, const and let also hoist their properties, but they are in different zone.

hoisting Def (Simple /layman version)

1. we can access functions and variables before its actual declaration.

Now Its time to go deep drive into how Js compile and execute our 2 lines code

In JavaScript, the way the compiler and engine handle variable declarations and assignments can be nuanced, especially when dealing with let and var.
Let's break down the process from both the compiler and execution perspectives for the given code:

name = 'ashu';
let name;

at this point i am making clear that when we write the javascript code, 1st parser and compiler compiles our code then it goes into execution phase.

Compiler Perspective
First Line: name = 'ashu';

During the compilation phase,
the JavaScript engine parses the code and creates the necessary scopes.
The assignment name = 'ashu';

will be noted, but at this stage, the engine does not execute the code; it merely records the existence of an assignment to a variable named name.

If name has not been declared before, the compiler treats it as an assignment to a global variable (var name in the global scope) since var declarations are hoisted and accessible globally.

Second Line: let name;

When the compiler encounters the let name; declaration, it acknowledges that name should be block-scoped.

The compiler places name in the Temporal Dead Zone (TDZ) for the scope it belongs to,
meaning it acknowledges the existence of name but marks it as uninitialized.

The let declaration is not hoisted in the same way as var.

Instead, it creates a binding in the scope and initializes it only when the declaration is executed.

Execution Perspective

First Line: name = 'ashu';

When the JavaScript engine executes the assignment name = 'ashu';,
it checks for the existence of name in the current scope. Since name is declared with let but is in the TDZ (Temporal Dead Zone), any attempt to access it before the let declaration is initialized will result in a ReferenceError.

Hence, at this point, name is in the TDZ, and the assignment name = 'ashu'; results in a ReferenceError.

Second Line: let name;

This line initializes the name variable within the block scope.
After this point, name is no longer in the TDZ and can be accessed or assigned without error.

Now Bonus tip

difference Between undeclare vs undefined vs uninitialised;

undeclare :- variable is not declare yet.
undefined :- Variable declared but not initialized;
uninitialised :- variable defined but its value will came later part.

Ex:- const result = multiplyBy2(5);
untill the retun value of the funciton will assigned to result till that point it would be in un initialized zone.

intersting Fact:-

You know the temporal dead zone initially decorated for Const but lates point in time they adopted in **Let**

Reference:-

1. https://frontendmasters.com/courses/deep-javascript-v3 + My analogy along with GitHub co-pilot

The above is the detailed content of Unraveling JavaScript: A Deep Dive into Hoisting, Temporal Dead Zone, and Variable States. For more information, please follow other related articles on the PHP Chinese website!