Common hoisting pitfalls in Javascript - Step-by-Step Execution

Concept Flow - Common hoisting pitfalls

Start Execution

↓

Parse Declarations

↓

Hoist var declarations

↓

Execute code line by line

↓

Encounter var usage before assignment?

↓

Value is undefined

↓

Encounter let/const usage before declaration?

↓

ReferenceError thrown

↓

End Execution

JavaScript first moves variable declarations (var) to the top but not their assignments, causing undefined values if used early; let and const cause errors if used before declaration.

Execution Sample

Javascript

console.log(a);
var a = 5;
console.log(b);
let b = 10;

Shows how var is hoisted with undefined value and let causes ReferenceError if accessed before declaration.

Execution Table

Step	Code Line	Action	Variable States	Output / Error
1	console.log(a);	a is declared but not assigned yet (hoisted as undefined)	a=undefined, b=uninitialized	undefined
2	var a = 5;	Assign 5 to a	a=5, b=uninitialized
3	console.log(b);	b is declared but in temporal dead zone (let not hoisted like var)	a=5, b=uninitialized	ReferenceError
4	let b = 10;	Declare and assign b	a=5, b=10

💡 Execution stops at step 3 due to ReferenceError accessing 'b' before declaration

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
a	undefined (hoisted)	undefined	5	5	5
b	uninitialized	uninitialized	uninitialized	uninitialized (access causes error)	uninitialized

Key Moments - 3 Insights

Why does console.log(a) print undefined instead of throwing an error?

Because var declarations are hoisted to the top with an initial value of undefined, so 'a' exists but is not assigned yet (see execution_table step 1).

Why does console.log(b) cause a ReferenceError?

Because let declarations are not hoisted like var; 'b' is in a temporal dead zone until declared, so accessing it before declaration throws an error (see execution_table step 3).

Does hoisting move variable assignments too?

No, only declarations are hoisted. Assignments stay where they are, so variables declared with var are undefined until assigned (see execution_table steps 1 and 2).

Visual Quiz - 3 Questions

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

A undefined

B 5

C ReferenceError

D null

💡 Hint

Check the 'Variable States' column at step 1 in the execution_table.

At which step does the ReferenceError occur?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Output / Error' column in the execution_table for the error message.

If 'var a = 5;' was moved before 'console.log(a);', what would console.log(a) output at step 1?

A undefined

B 5

C ReferenceError

D null

💡 Hint

Consider how assignment affects variable value before the first console.log in the execution_table.

Concept Snapshot

JavaScript hoisting moves var declarations to the top with initial value undefined.
Accessing var before assignment prints undefined.
let and const are not hoisted like var; accessing them before declaration causes ReferenceError.
Assignments are not hoisted, only declarations.
Beware of temporal dead zone with let/const.

Full Transcript

In JavaScript, variable declarations using var are hoisted to the top of their scope, meaning the variable exists before its line of declaration but is initialized as undefined. This is why console.log(a) before 'var a = 5;' prints undefined instead of causing an error. However, let and const declarations are not hoisted in the same way. Accessing them before their declaration line causes a ReferenceError due to the temporal dead zone. Assignments to variables are not hoisted, only declarations. This behavior can cause confusion and bugs if not understood. The execution table shows step-by-step how variables a and b change and when errors occur.