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

Need a 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

Need a 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

Need a 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

Need a hint?

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