Variable hoisting behavior in Javascript - Step-by-Step Execution

Concept Flow - Variable hoisting behavior

Start Execution

↓

Parse code

↓

Hoist declarations

↓

Initialize variables

↓

Execute code line by line

↓

Use variables

↓

End Execution

JavaScript first moves variable declarations to the top (hoisting), then runs code line by line, so variables exist before their declaration line but may be undefined.

Execution Sample

Javascript

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

This code logs the value of 'a' before and after it is assigned, showing hoisting behavior.

Execution Table

Step	Code Line	Action	Variable 'a' Value	Output
1	Hoisting phase	Declaration of 'a' hoisted, initialized as undefined	undefined
2	console.log(a);	Logs current value of 'a'	undefined	undefined
3	var a = 5;	Assigns 5 to 'a'	5
4	console.log(a);	Logs current value of 'a'	5	5
5	End	Execution finished	5

💡 Reached end of code, all lines executed

Variable Tracker

Variable	Start (before execution)	After Step 1	After Step 3	Final
a	not declared	undefined	5	5

Key Moments - 3 Insights

Why does the first console.log print 'undefined' instead of causing an error?

Because the declaration of 'a' is hoisted and initialized as undefined before code runs, so 'a' exists but has no value yet (see execution_table step 2).

Does the assignment 'a = 5' get hoisted too?

No, only the declaration is hoisted. The assignment happens in order during execution (see execution_table step 3).

What would happen if we used 'let' instead of 'var' for 'a'?

Using 'let' does not hoist the variable in the same way; accessing it before declaration causes a ReferenceError.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'a' at Step 2?

A 5

B undefined

C ReferenceError

D null

💡 Hint

Check the 'Variable 'a' Value' column at Step 2 in the execution_table.

At which step does 'a' get assigned the value 5?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Action' column describing assignment in the execution_table.

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

A It logs 'undefined'

B It logs 5

C It throws a ReferenceError

D It logs null

💡 Hint

Recall that 'let' variables are not hoisted like 'var' and accessing before declaration causes error.

Concept Snapshot

JavaScript hoists variable declarations (var) to the top.
Variables exist before their declaration line but are initialized as undefined.
Assignments are not hoisted, they happen in order.
Accessing var before assignment logs undefined, not error.
Using let/const changes hoisting behavior and causes errors if accessed early.

Full Transcript

In JavaScript, variable declarations using 'var' are hoisted to the top of their scope before code runs. This means the variable exists from the start but is set to undefined until the assignment line executes. For example, logging a variable before its declaration prints undefined, not an error. The assignment happens in order during execution. Using 'let' or 'const' changes this behavior: accessing them before declaration causes a ReferenceError. This trace shows step-by-step how 'var a' is hoisted, initialized as undefined, then assigned 5, and how console.log outputs reflect these states.