Synchronous vs asynchronous execution in Javascript - Hands-On Comparison

Understanding Synchronous vs Asynchronous Execution in JavaScript

📖 Scenario: You are building a simple program to understand how JavaScript runs code step-by-step (synchronously) and how it can also run some tasks in the background (asynchronously) without stopping the main work.

🎯 Goal: Learn the difference between synchronous and asynchronous execution by writing code that shows how JavaScript handles tasks one after another and how it handles tasks that wait in the background.

📋 What You'll Learn

Create a synchronous function that logs messages in order

Create an asynchronous function using setTimeout to delay a message

Use a variable to control the delay time for the asynchronous task

Print all messages to show the order of execution

💡 Why This Matters

🌍 Real World

Understanding synchronous and asynchronous execution helps when building web apps that need to do tasks like loading data without freezing the screen.

💼 Career

Many programming jobs require knowledge of asynchronous code to create smooth, fast user experiences and handle tasks like network requests.

1

Create synchronous messages

Write two console.log statements: first log "Start" and then log "End" to show synchronous execution.

Javascript

# Write console.log("Start") and console.log("End") below
// Your code here

Hint

Use console.log to print messages in order.

2

Add asynchronous delay time variable

Create a variable called delay and set it to 1000 to represent 1000 milliseconds (1 second) delay for the asynchronous task.

Javascript

console.log("Start");
console.log("End");

// Create a variable delay set to 1000
// Your code here

Hint

Use const delay = 1000; to set the delay time.

3

Add asynchronous message with setTimeout

Use setTimeout with the delay variable to log "Async message" after the delay. Write setTimeout(() => console.log("Async message"), delay); below the existing code.

Javascript

console.log("Start");
console.log("End");

const delay = 1000;

// Use setTimeout to log "Async message" after delay
// Your code here

Hint

Use setTimeout to run code after a delay without stopping the main program.

4

Print final output to show execution order

Add a console.log statement to print "Done" after the setTimeout call to show the order of synchronous and asynchronous messages.

Javascript

console.log("Start");
console.log("End");

const delay = 1000;

setTimeout(() => console.log("Async message"), delay);

// Print "Done" below
// Your code here

Hint

The console.log("Done") runs immediately after setTimeout because setTimeout is asynchronous.

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