Understanding Javascript variables declaration (var, let, const), Hosting mechanism and Temporal dead zone (TDZ)

var, let and const are used in JavaScript to declare variables, but they differ significantly in their scope, hoisting, and whether they can be reassigned or redeclared.

1. var is the original way to declare variables in JavaScript. It has largely been superseded by let and const due to its often confusing scoping behavior.

Scope: Function-scoped or globally scoped. Variables declared with var inside a function are only accessible within that function. If declared outside any function, they are global. var ignores block scope (i.e., it is visible outside of if statements or for loops).

Hoisting: Variables declared with var are hoisted (moved to the top of their scope) and initialized with undefined. This means you can use a var variable before its declaration in the code without an error (though it will be undefined).

Reassignment: Can be reassigned (its value can be changed).

Redeclaration: Can be redeclared within the same scope without error.

2. let (Modern, Block-Scoped)
Introduced in ECMAScript 2015 (ES6), let is the preferred way to declare variables that might need to be reassigned.

Scope: Block-scoped. A variable declared with let is only accessible within the block of code (defined by curly braces {}) in which it's declared (e.g., inside an if statement, for loop, or a simple block).

Hoisting: Variables declared with let are hoisted but are not initialized. Accessing a let variable before its declaration results in a ReferenceError (this is known as the Temporal Dead Zone).

Reassignment: Can be reassigned (its value can be changed).

Redeclaration: Cannot be redeclared within the same scope. Doing so results in a SyntaxError.

3. const (Modern, Block-Scoped, Immutable Reference)
Also introduced in ES6, const is used to declare variables whose value should remain constant throughout the program's execution.

Scope: Block-scoped, just like let.

Hoisting: Hoisted, but not initialized, resulting in a Temporal Dead Zone.

Reassignment: Cannot be reassigned (its value cannot be changed after initialization). You must assign a value when declaring it.

Redeclaration: Cannot be redeclared within the same scope.

4. Hoisting

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope (either the global scope or the function scope) during the compilation phase before the code is executed.

- var variable Hositing

- let Variable Hoisting (with TDZ):

- Function Declaration:

- Function Expression:

5. Temporal Dead Zone (TMZ)

The Temporal Dead Zone (TDZ) is a specific period during the execution of JavaScript code where variables declared with let or const exist but cannot be accessed or assigned a value.

If you attempt to access a let or const variable within its TDZ, the JavaScript engine will immediately throw a ReferenceError.

* How the TDZ Works
The TDZ is directly tied to the concept of hoisting for let and const:

Hoisting Occurs: Like var, variables declared with let and const are hoisted (their creation is moved) to the top of their scope (which is block scope for these keywords).

Uninitialized State: Unlike var (which is initialized to undefined during hoisting), let and const variables are not initialized when they are hoisted. They are put into an uninitialized state.

The TDZ Period: The TDZ is the time period that begins when the scope is entered (e.g., when a { block is started) and ends when the variable's declaration line is executed and the variable is assigned a value (initialized).

Exiting the TDZ: Once the JavaScript interpreter reaches and executes the line of code that declares and initializes the variable (e.g., let x = 10; or const PI = 3.14;), the variable exits the TDZ and becomes fully accessible.