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.

Practice

1. What happens if you try to access a let variable before its declaration in JavaScript?

easy

A. It returns the variable's default value.

B. It throws a ReferenceError due to the temporal dead zone.

C. It returns null.

D. It returns undefined.

Solution

1. Step 1: Understand hoisting behavior of let

   Variables declared with let are hoisted but not initialized immediately.

2. Step 2: Access before declaration causes error

   Accessing such variables before declaration triggers a ReferenceError due to the temporal dead zone.

3. Final Answer:

   It throws a ReferenceError due to the temporal dead zone. -> Option B

4. Quick Check:

   Temporal Dead Zone = ReferenceError [OK]

Hint: Accessing before declaration with let/const causes ReferenceError [OK]

Common Mistakes:

• Thinking it returns undefined like var
• Assuming it returns null
• Believing it has a default value

2. Which of the following is the correct syntax to declare a constant variable in JavaScript?

easy

A. const PI = 3.14;

B. let const PI = 3.14;

C. constant PI = 3.14;

D. var const PI = 3.14;

Solution

1. Step 1: Recall correct const declaration syntax

   The correct way to declare a constant is using const followed by the variable name and assignment.

2. Step 2: Identify invalid syntax options

   Options B, C, and D use invalid keywords or combinations not supported in JavaScript.

3. Final Answer:

   const PI = 3.14; -> Option A

4. Quick Check:

   const declaration syntax = const name = value [OK]

Hint: Use 'const name = value;' to declare constants [OK]

Common Mistakes:

• Using 'constant' keyword instead of 'const'
• Combining let or var with const
• Missing assignment during declaration

3. What will be the output of the following code?

console.log(x);
let x = 10;

medium

A. 10

B. undefined

C. ReferenceError

D. null

Solution

1. Step 1: Analyze variable declaration and usage

   The variable x is declared with let after the console.log statement.

2. Step 2: Understand temporal dead zone effect

   Accessing x before its declaration causes a ReferenceError due to the temporal dead zone.

3. Final Answer:

   ReferenceError -> Option C

4. Quick Check:

   let before declaration = ReferenceError [OK]

Hint: Accessing let before declaration throws ReferenceError [OK]

Common Mistakes:

• Assuming it prints undefined like var
• Expecting the value 10 immediately
• Thinking it prints null

4. Identify the error in the following code and fix it:

function test() {
  console.log(a);
  const a = 5;
}
test();

medium

A. No error, outputs 5

B. TypeError, fix by initializing a with null

C. SyntaxError, fix by changing const to var

D. ReferenceError, fix by moving const declaration before console.log

Solution

1. Step 1: Identify the cause of error

   Accessing a before its const declaration causes a ReferenceError due to temporal dead zone.

2. Step 2: Fix by reordering declaration

   Moving the const a = 5; line before console.log(a); fixes the error.

3. Final Answer:

   ReferenceError, fix by moving const declaration before console.log -> Option D

4. Quick Check:

   Declare const before use to avoid ReferenceError [OK]

Hint: Declare const before use to avoid ReferenceError [OK]

Common Mistakes:

• Changing const to var without fixing order
• Ignoring temporal dead zone
• Assuming no error occurs

5. Consider the code below. What will be the output and why?

const a = 1;
{
  console.log(a);
  let a = 2;
}

hard

A. ReferenceError

B. 2

C. 1

D. undefined

Solution

1. Step 1: Understand block scope and hoisting

   The block declares a new let a which is hoisted but uninitialized inside the block.

2. Step 2: Accessing a before let a declaration

   Inside the block, console.log(a) tries to access the block-scoped a before its declaration, causing a ReferenceError due to temporal dead zone.

3. Final Answer:

   ReferenceError -> Option A

4. Quick Check:

   Block-scoped let shadows outer const causing ReferenceError [OK]

Hint: Block let shadows outer const; accessing before declaration errors [OK]

Common Mistakes:

• Assuming it prints outer const value 1
• Expecting it prints 2 before declaration
• Thinking it prints undefined