Why asynchronous programming is needed in Javascript - See It in Action

Why asynchronous programming is needed

📖 Scenario: Imagine you are building a simple web page that fetches user data from a server. Sometimes, the server takes time to respond. If your page waits for the server to reply before doing anything else, it will freeze and feel slow. This is where asynchronous programming helps.

🎯 Goal: You will create a small JavaScript program that shows how waiting for a slow task can block other actions, and then how asynchronous programming avoids this problem.

📋 What You'll Learn

Create a function called slowTask that simulates a slow operation using setTimeout

Create a variable called message with the value 'Start'

Call slowTask and then immediately update message to 'End'

Print message before and after calling slowTask to show the order of execution

💡 Why This Matters

🌍 Real World

Web pages often fetch data from servers or wait for user actions. Asynchronous programming helps keep the page responsive during these waits.

💼 Career

Understanding asynchronous programming is essential for web developers to build fast, user-friendly applications that handle data loading and user interactions smoothly.

1

Create a variable to hold the initial message

Create a variable called message and set it to the string 'Start'.

Javascript

# Your code here

Need a hint?

Use let message = 'Start'; to create the variable.

2

Create a slow task function using setTimeout

Create a function called slowTask that uses setTimeout to simulate a slow operation by printing 'Slow task done' after 2000 milliseconds (2 seconds).

Javascript

let message = 'Start';
// Your code here

Need a hint?

Use setTimeout(() => { console.log('Slow task done'); }, 2000); inside the function.

3

Call slowTask and update message immediately

Call the function slowTask() and then immediately set the variable message to the string 'End'.

Javascript

let message = 'Start';

function slowTask() {
  setTimeout(() => {
    console.log('Slow task done');
  }, 2000);
}

// Your code here

Need a hint?

Call slowTask() then write message = 'End'; right after.

4

Print message before and after slowTask call

Print the value of message before calling slowTask() and again after setting message to 'End'. This will show how asynchronous code works.

Javascript

let message = 'Start';

function slowTask() {
  setTimeout(() => {
    console.log('Slow task done');
  }, 2000);
}

// Your code here

Need a hint?

Use console.log(message); before and after calling slowTask() and changing message.