Event loop mental model in Node.js - Step-by-Step Execution

Concept Flow - Event loop mental model

Start: Node.js program runs

↓

Call Stack: Execute sync code

↓

Encounter async task?

No→Continue sync

Yes↓

Register callback in Task Queue

↓

Event Loop checks Call Stack empty?

No↓

Move callback from Task Queue to Call Stack

↓

Execute callback

↓

Repeat Event Loop

The event loop runs continuously, executing synchronous code first, then processing asynchronous callbacks from the task queue when the call stack is empty.

Execution Sample

Node.js

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
console.log('End');

This code logs 'Start', schedules a timeout callback, then logs 'End'. The timeout callback runs after synchronous code.

Execution Table

Step	Call Stack	Task Queue	Action	Output
1	console.log('Start')	[]	Execute sync log	Start
2	setTimeout(callback, 0)	[callback]	Register callback in Task Queue	No output
3	console.log('End')	[callback]	Execute sync log	End
4	empty	[callback]	Event Loop moves callback to Call Stack	No output
5	callback execution	empty	Execute callback log	Timeout
6	empty	empty	No more tasks, program ends	No output

💡 All synchronous code executed and task queue emptied, event loop stops.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
Call Stack	empty	empty	empty	callback execution	empty	empty
Task Queue	empty	callback added	callback waiting	empty	empty	empty
Output	empty	Start printed	Start and End printed	Start and End printed	Start, End and Timeout printed	All printed

Key Moments - 2 Insights

Why does 'Timeout' print after 'End' even though setTimeout delay is 0?

Because setTimeout callback is placed in the task queue and only runs after the call stack is empty, so synchronous code like 'End' logs first (see execution_table steps 2-5).

What happens if the call stack is not empty when the event loop checks the task queue?

The event loop waits until the call stack is empty before moving callbacks from the task queue to the call stack (see concept_flow and execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is in the call stack at Step 3?

A setTimeout call

B console.log('End')

C callback function

D empty

💡 Hint

Check the 'Call Stack' column at Step 3 in the execution_table.

At which step does the event loop move the callback from the task queue to the call stack?

A Step 2

B Step 5

C Step 4

D Step 3

💡 Hint

Look for the action 'Event Loop moves callback to Call Stack' in the execution_table.

If the setTimeout delay was increased to 1000ms, how would the execution table change?

A Callback would stay longer in task queue before Step 4

B Callback would move to call stack immediately at Step 4

C Callback would execute before 'End' logs

D No change in execution order

💡 Hint

Consider how setTimeout delay affects when callback enters the task queue and event loop timing.

Concept Snapshot

Event Loop in Node.js:
- Runs synchronous code first on Call Stack
- Async callbacks go to Task Queue
- Event Loop moves callbacks to Call Stack when empty
- setTimeout with 0 delay still runs after sync code
- Keeps Node.js non-blocking and responsive

Full Transcript

The Node.js event loop runs synchronous code first by placing it on the call stack. When it encounters asynchronous tasks like setTimeout, it registers their callbacks in the task queue. The event loop waits for the call stack to be empty before moving callbacks from the task queue to the call stack to execute them. This means even a setTimeout with zero delay runs after all synchronous code finishes. This model allows Node.js to handle many tasks efficiently without blocking the program.