Synchronous vs asynchronous execution in Javascript - Visual Side-by-Side Comparison

Concept Flow - Synchronous vs asynchronous execution

Start Program

↓

Execute Synchronous Code

↓

Encounter Asynchronous Call?

No→Continue Synchronous

Yes↓

Register Callback

↓

Continue Synchronous Code

↓

Asynchronous Event Completes

↓

Execute Callback

↓

Program Ends

The program runs synchronous code first, then registers asynchronous callbacks, continues synchronous code, and finally runs callbacks when async events complete.

Execution Sample

Javascript

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

This code logs 'Start', schedules an async log 'Async', then logs 'End' synchronously.

Execution Table

Step	Action	Output	Notes
1	console.log('Start')	'Start'	Synchronous output immediately
2	setTimeout(callback, 0)	No output	Schedules async callback, does not block
3	console.log('End')	'End'	Synchronous output immediately
4	Async callback runs	'Async'	Runs after synchronous code finishes

💡 Program ends after all synchronous code and async callbacks run

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
callbackScheduled	false	false	true	true	false	false

Key Moments - 2 Insights

Why does 'End' print before 'Async' even though setTimeout delay is 0?

Because setTimeout schedules the callback to run later, after all synchronous code finishes (see steps 2 and 3 in execution_table).

Does setTimeout block the program until the callback runs?

No, setTimeout is asynchronous and does not block; the program continues running synchronous code immediately (step 2 vs step 3).

Visual Quiz - 3 Questions

Look at the execution_table, what is output at Step 3?

A 'Async'

B 'End'

C 'Start'

D No output

💡 Hint

Check the 'Output' column for Step 3 in execution_table

At which step does the asynchronous callback run?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look for 'Async callback runs' in the 'Action' column of execution_table

If we remove setTimeout, what changes in the output order?

A 'Async' prints before 'Start'

B 'End' prints before 'Start'

C 'Async' never prints

D 'Start' and 'End' print in reverse order

💡 Hint

Without setTimeout, no async callback is scheduled (see variable_tracker for callbackScheduled)

Concept Snapshot

Synchronous code runs top to bottom, blocking next steps.
Asynchronous code schedules tasks to run later without blocking.
setTimeout schedules a callback after delay (even 0ms).
Callbacks run after all synchronous code finishes.
This allows responsive programs without waiting.

Full Transcript

This visual execution shows how JavaScript runs synchronous code immediately and schedules asynchronous callbacks to run later. The example logs 'Start', then schedules an async log 'Async' with setTimeout, then logs 'End'. The output order is 'Start', 'End', then 'Async'. This happens because setTimeout does not block; it registers a callback to run after synchronous code completes. The variable tracker shows when the callback is scheduled and cleared. Key moments clarify why 'End' prints before 'Async' and that setTimeout is non-blocking. The quiz tests understanding of output order and async callback timing.