Hoisting with let and const in Javascript - Step-by-Step Execution

Concept Flow - Hoisting with let and const

Start Execution

↓

Parse Declarations

↓

let/const variables hoisted but uninitialized

↓

Enter Temporal Dead Zone (TDZ)

↓

Access variable before initialization?

Yes→ReferenceError thrown

No↓

Variable initialized

↓

Variable can be used safely

↓

End Execution

JavaScript hoists let and const declarations but keeps them uninitialized in a Temporal Dead Zone until their actual line runs, causing errors if accessed too early.

Execution Sample

Javascript

console.log(a);
let a = 5;
console.log(a);

This code tries to print a let variable before and after initialization, showing the Temporal Dead Zone error and then the correct value.

Execution Table

Step	Code Line	Action	Variable 'a' State	Output / Error
1	console.log(a);	Access 'a' before initialization	TDZ (uninitialized)	ReferenceError: Cannot access 'a' before initialization
2	let a = 5;	Initialize 'a' with 5	Initialized with 5
3	console.log(a);	Access 'a' after initialization	Initialized with 5	5

💡 Execution stops after ReferenceError at step 1 because 'a' is in Temporal Dead Zone before initialization.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
a	Not declared	TDZ (uninitialized)	5 (initialized)	5 (initialized)

Key Moments - 3 Insights

Why does accessing 'a' before its declaration cause an error, even though 'a' is hoisted?

Because 'a' is hoisted but remains uninitialized in the Temporal Dead Zone (TDZ) until the let statement runs, as shown in execution_table step 1 where accessing 'a' throws ReferenceError.

Is 'a' accessible before the let declaration line?

No, 'a' is in TDZ before initialization, so any access before step 2 causes an error, as seen in execution_table step 1.

What happens after 'a' is initialized with let?

After initialization at step 2, 'a' holds the value 5 and can be accessed safely, shown in step 3 where console.log outputs 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the state of variable 'a' at step 1?

A TDZ (uninitialized)

B Initialized with 5

C Undefined

D Null

💡 Hint

Check the 'Variable 'a' State' column at step 1 in the execution_table.

At which step does accessing 'a' no longer cause an error?

A Step 1

B Step 2

C Step 3

D Never

💡 Hint

Look at the 'Output / Error' column; step 3 shows a valid output without error.

If we replace 'let a = 5;' with 'var a = 5;', what would happen at step 1?

A ReferenceError

B undefined

C 5

D SyntaxError

💡 Hint

Recall that var declarations are hoisted and initialized with undefined, unlike let/const.

Concept Snapshot

Hoisting with let and const:
- let and const declarations are hoisted but uninitialized.
- They stay in Temporal Dead Zone (TDZ) until their line runs.
- Accessing them before initialization causes ReferenceError.
- After initialization, variables can be used normally.
- Unlike var, no default undefined initialization.

Full Transcript

This visual execution shows how JavaScript handles hoisting with let and const. When the code starts, the variable 'a' declared with let is hoisted but not initialized, placing it in the Temporal Dead Zone (TDZ). At step 1, trying to access 'a' causes a ReferenceError because it is still uninitialized. At step 2, 'a' is initialized with the value 5. At step 3, accessing 'a' works correctly and prints 5. This demonstrates that let and const variables are hoisted but cannot be used before their declaration line, unlike var which is hoisted and initialized with undefined. Understanding this helps avoid common errors in JavaScript related to variable access timing.