What hoisting is in Javascript - Step-by-Step Execution

Concept Flow - What hoisting is

Start Execution

↓

Scan code for declarations

↓

Move declarations to top

↓

Execute code line by line

↓

Use variables/functions

↓

End Execution

JavaScript first moves all variable and function declarations to the top before running the code, so they can be used earlier than expected.

Execution Sample

Javascript

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

This code shows how variable declaration is hoisted but assignment is not.

Execution Table

Step	Code Line	Action	Variable 'x' State	Output
1	console.log(x);	Print current value of x	undefined	undefined
2	var x = 5;	Declaration hoisted, x initialized as undefined	undefined
3	x = 5;	Assign 5 to x	5
4	console.log(x);	Print current value of x	5	5

💡 All lines executed; variable declaration hoisted but assignment happens in order.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
x	not declared	undefined	5	5

Key Moments - 2 Insights

Why does console.log(x) print undefined before x is assigned 5?

Because the declaration 'var x' is moved to the top and initialized as undefined (see Step 2 in execution_table), but the assignment 'x = 5' happens later (Step 3).

Is the value 5 available before the assignment line?

No, only the declaration is hoisted, not the assignment. So before Step 3, x is undefined.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output of the first console.log(x)?

A 5

B undefined

C ReferenceError

D null

💡 Hint

Check Step 1 output in execution_table where x is undefined.

At which step does variable x get the value 5?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Variable x State' column in execution_table for Step 3.

If we change 'var x = 5;' to 'let x = 5;', what would happen at the first console.log(x)?

A Throws ReferenceError

B Prints 5

C Prints undefined

D Prints null

💡 Hint

With 'let', variables are not hoisted as undefined; see JavaScript hoisting rules.

Concept Snapshot

JavaScript hoisting moves declarations to the top before execution.
Variables declared with var are hoisted and initialized as undefined.
Assignments stay in place and run in order.
Accessing var variables before assignment prints undefined.
Functions are fully hoisted and can be called before declaration.
Let and const are hoisted but not initialized, causing ReferenceError if accessed early.

Full Transcript

Hoisting in JavaScript means the interpreter moves all variable and function declarations to the top of their scope before running the code. For variables declared with var, this means they exist from the start but have the value undefined until assigned. For example, in the code, console.log(x) prints undefined before x is assigned 5 because only the declaration is hoisted, not the assignment. This is why the first console.log outputs undefined and the second outputs 5. Variables declared with let or const behave differently and cause errors if accessed before declaration. Understanding hoisting helps avoid confusion about variable values during code execution.