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.

Practice

1. Which statement best describes synchronous execution in JavaScript?

easy

A. Tasks run only when the user clicks a button.

B. Tasks run in the background without waiting for others to finish.

C. Tasks run randomly without any order.

D. Tasks run one after another, waiting for each to finish before starting the next.

Solution

1. Step 1: Understand synchronous execution

   Synchronous means tasks happen one by one, each waiting for the previous to finish.

2. Step 2: Match description to options

   Tasks run one after another, waiting for each to finish before starting the next. clearly states tasks run one after another, which matches synchronous behavior.

3. Final Answer:

   Tasks run one after another, waiting for each to finish before starting the next. -> Option D

4. Quick Check:

   Synchronous = sequential task execution [OK]

Hint: Synchronous means wait for each task to finish before next [OK]

Common Mistakes:

• Confusing synchronous with asynchronous execution
• Thinking tasks run at the same time in synchronous
• Believing synchronous tasks run randomly

2. Which of the following is the correct syntax to create a simple asynchronous function in JavaScript?

easy

A. function async myFunction() {}

B. async function myFunction() {}

C. function myFunction async() {}

D. function myFunction() async {}

Solution

1. Step 1: Recall async function syntax

   In JavaScript, the keyword 'async' comes before the function keyword to declare an asynchronous function.

2. Step 2: Check each option

   async function myFunction() {} uses 'async function myFunction() {}' which is correct syntax.

3. Final Answer:

   async function myFunction() {} -> Option B

4. Quick Check:

   Async keyword before function = correct syntax [OK]

Hint: Async keyword goes before function keyword [OK]

Common Mistakes:

• Placing async after function name
• Putting async inside parentheses
• Using invalid order of keywords

3. What will be the output of the following code?

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

medium

A. Start\nEnd\nMiddle

B. Start\nMiddle\nEnd

C. Middle\nStart\nEnd

D. End\nStart\nMiddle

Solution

1. Step 1: Understand synchronous and asynchronous parts

   'console.log("Start")' runs immediately (synchronous). 'setTimeout' schedules 'Middle' to run later (asynchronous). 'console.log("End")' runs immediately after 'Start'.

2. Step 2: Determine order of output

   Output order is 'Start', then 'End', then 'Middle' because 'setTimeout' callback runs after current code finishes.

3. Final Answer:

   Start End Middle -> Option A

4. Quick Check:

   setTimeout delays callback, so logs after synchronous code [OK]

Hint: setTimeout callback runs after current code finishes [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Thinking output order matches code order exactly
• Ignoring asynchronous delay even if zero

4. Identify the error in this code snippet that tries to use asynchronous execution:

function fetchData() {
  let data;
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(json => data = json);
  return data;
}
console.log(fetchData());

medium

A. Syntax error in arrow functions

B. fetch is not a function

C. fetchData returns before data is assigned, so returns undefined

D. Missing async keyword on fetchData

Solution

1. Step 1: Analyze asynchronous fetch behavior

   fetch returns a promise and .then callbacks run later, but fetchData returns immediately before data is set.

2. Step 2: Understand return value timing

   Since data is assigned asynchronously, fetchData returns undefined because data is not ready yet.

3. Final Answer:

   fetchData returns before data is assigned, so returns undefined -> Option C

4. Quick Check:

   Async assignment happens after return, so undefined returned [OK]

Hint: Return happens before async data arrives, so returns undefined [OK]

Common Mistakes:

• Thinking fetchData waits for fetch to finish
• Assuming data is ready immediately
• Confusing syntax errors with logic errors

5. You want to run three tasks: A, B, and C. Task B depends on A finishing, but C can run anytime. Which approach correctly uses asynchronous execution to run tasks efficiently?

hard

A. Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A.

B. Run B and C asynchronously first, then run A synchronously after both finish.

C. Run A synchronously, then B synchronously, then C synchronously after both.

D. Run all tasks synchronously one after another.

Solution

1. Step 1: Understand task dependencies

   Task B depends on A finishing, so B must wait for A. Task C can run anytime, so it can run in parallel.

2. Step 2: Choose asynchronous approach respecting dependencies

   Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A. runs A asynchronously, then runs B in A's callback (after A finishes), and runs C asynchronously at the same time as A, maximizing efficiency.

3. Final Answer:

   Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A. -> Option A

4. Quick Check:

   Respect dependencies and run independent tasks in parallel [OK]

Hint: Run dependent tasks in callbacks, independent tasks in parallel [OK]

Common Mistakes:

• Running dependent tasks in parallel ignoring order
• Running all tasks synchronously wasting time
• Running independent tasks sequentially unnecessarily