Hoisting with let & const vs var in JS and TDZ?

Greetings, Glimpse! Today, let’s explore the complex world of the Temporal Dead Zone (TDZ) as we begin to delve into the depths of raising JavaScript. Get ready for some compelling examples to illustrate these concepts.

Hoisting: A Deeper Dive

To really capture the lift, let’s examine a more complex situation involving functions and block-level declarations.

console.log(foo); // undefined console.log(bar); // ReferenceError: Cannot access 'bar' before initialization var foo = 'I am hoisted!'; let bar = 'I am in the TDZ!'; function hoistingExample() { console.log(foo); // I am hoisted! console.log(bar); // ReferenceError: Cannot access 'bar' before initialization var foo = 'Function scope hoisting!'; let bar = 'Function scope TDZ!'; } hoistingExample();

In this example, the function var foo is elevated in scope, but its value remains undefined until the actual declaration. In other words, the let bar is raised at the top of the block (in this case it works), but accessing it before the declaration results in a TDZ error.

The Temporal Dead Zone Chronicles

Let's delve even deeper into the Temporal Dead Zone with a nested example.

function nestedExample() { console.log(outer); // undefined console.log(inner); // ReferenceError: inner is not defined var outer = 'I am in the TDZ!'; if (true) { let inner = 'I am hoisted, but still in the TDZ!'; console.log(inner); // I am hoisted, but still in the TDZ! console.log(outer); // I am in the TDZ! outer = 'I escaped the TDZ!'; } console.log(outer); // I escaped the TDZ! console.log(inner); // ReferenceError: 'inner' is not defined } nestedExample();

In this scenario,

1. console.log(outer); // undefined: var outer is hoisted, but undefined until the declaration.

2. console.log(inner); // ReferenceError: inner is not defined: let inner is in the TDZ, causing a ReferenceError.

3. console.log(inner); // I am hoisted, but still in the TDZ!: Inside the if block, inner is accessible.

4. console.log(outer); // I am in the TDZ!: var outer is accessible and logged within the block.

5. console.log(outer); // I escaped the TDZ!: Updated value of outer logged outside the block.

6. console.log(inner); // ReferenceError: 'inner' is not defined: Attempting to access inner outside the block results in a ReferenceError.

Temporary Dead Zone (TDZ) – Time between liftoff and variable initialization. Any line of code before the let variable is declared and initialized is considered a TDZ for that variable.

let a = 10; var b = 15; console.log(window.b); // 15 console.log(window.a); // undefined

In this example, until the line let a = 10, a is in the TDZ and cannot be accessed. This applies not only to the global context (window or this) but also to any other scope.

Stricter than Strict: const

Now, let's talk about const. It's the strictest of them all. Once a value is assigned to a const variable, it cannot be reassigned. This adds an extra layer of immutability to your code.