Why async and await are needed in Javascript - See It in Action

Why async and await are needed

📖 Scenario: Imagine you want to get some information from the internet, like the weather or news. Sometimes, this takes time. Your program should not stop and wait but keep doing other things. This is where async and await help.

🎯 Goal: You will create a simple program that shows how async and await make it easy to wait for information without stopping everything else.

📋 What You'll Learn

Create a function called getData that returns a promise simulating a delay

Create a variable called message with a string value

Create an async function called showData that uses await to wait for getData

Print the message and the result from getData

💡 Why This Matters

🌍 Real World

Many apps get information from the internet or slow devices. Using <code>async</code> and <code>await</code> helps keep apps smooth and responsive.

💼 Career

Understanding <code>async</code> and <code>await</code> is important for web developers, especially when working with APIs, databases, or any task that takes time.

1

Create a function that simulates waiting for data

Create a function called getData that returns a promise which resolves with the string 'Data received' after 2 seconds.

Javascript

// Your code here

Hint

Use setTimeout inside a Promise to delay the response.

2

Create a message variable

Create a variable called message and set it to the string 'Waiting for data...'.

Javascript

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data received');
    }, 2000);
  });
}

// Your code here

Hint

Use const to create the message variable.

3

Create an async function to wait for data

Create an async function called showData. Inside it, use await with getData() and save the result in a variable called data.

Javascript

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data received');
    }, 2000);
  });
}

const message = 'Waiting for data...';

// Your code here

Hint

Remember to add async before the function and use await inside it.

4

Print the message and the data

Inside the showData function, add two console.log statements: one to print the message variable, and one to print the data variable. Then call showData().

Javascript

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data received');
    }, 2000);
  });
}

const message = 'Waiting for data...';

async function showData() {
  const data = await getData();
  // Your code here
}

// Your code here

Hint

Print the message first, then the data. Don't forget to call showData().

Practice

1. Why do we use async and await in JavaScript?

easy

A. To make the code run faster by skipping steps

B. To handle slow tasks without freezing the program

C. To write code that only works in old browsers

D. To stop the program completely until a task finishes

Solution

1. Step 1: Understand the problem with slow tasks

   Slow tasks like fetching data can freeze the program if handled synchronously.

2. Step 2: Role of async and await

   Async and await let the program wait for slow tasks without freezing, keeping it smooth.

3. Final Answer:

   To handle slow tasks without freezing the program -> Option B

4. Quick Check:

   Async/await = smooth waiting [OK]

Hint: Async/await = smooth waiting without freezing [OK]

Common Mistakes:

• Thinking async/await makes code faster
• Believing async/await stops the whole program
• Confusing async/await with old browser code

2. Which of the following is the correct way to declare an async function in JavaScript?

easy

A. function async fetchData() {}

B. function fetchData() async {}

C. async function fetchData() {}

D. function fetchData async() {}

Solution

1. Step 1: Recall async function syntax

   The correct syntax places async before the function keyword.

2. Step 2: Check each option

   Only async function fetchData() {} correctly uses async function fetchData() {}.

3. Final Answer:

   async function fetchData() {} -> Option C

4. Quick Check:

   Async before function keyword [OK]

Hint: Async keyword goes before function name [OK]

Common Mistakes:

• Placing async after function name
• Adding async inside function parentheses
• Writing async after function body

3. What will be the output of this code?

async function greet() {
  return 'Hello';
}

greet().then(console.log);

medium

A. 'Hello'

B. Promise { 'Hello' }

C. undefined

D. Error: greet is not a function

Solution

1. Step 1: Understand async function return

   An async function returns a Promise that resolves to the returned value.

2. Step 2: Using .then to get value

   The .then(console.log) prints the resolved value 'Hello'.

3. Final Answer:

   'Hello' -> Option A

4. Quick Check:

   Async function returns Promise, .then logs value [OK]

Hint: Async returns Promise; .then gets resolved value [OK]

Common Mistakes:

• Expecting direct string without .then
• Confusing Promise object with string
• Thinking async function returns undefined

4. Find the error in this code:

async function fetchData() {
  const data = await fetch('https://api.example.com');
  return data.json();
}

const result = fetchData();
console.log(result);

medium

A. data.json() is not a function

B. fetchData() should not be async

C. Cannot use await inside async function

D. Missing await before fetchData() call

Solution

1. Step 1: Check fetchData() call

   fetchData() returns a Promise, so logging it directly shows a Promise object.

2. Step 2: Fix by awaiting fetchData()

   Adding await before fetchData() inside an async context gets the resolved data.

3. Final Answer:

   Missing await before fetchData() call -> Option D

4. Quick Check:

   Await needed to get Promise result [OK]

Hint: Await async calls to get actual result [OK]

Common Mistakes:

• Logging Promise instead of awaited value
• Removing async keyword incorrectly
• Misunderstanding data.json() usage

5. You want to fetch user data and then fetch posts by that user. Which code correctly uses async/await to do this step-by-step without freezing the program?

function getUser() {
  return fetch('/user').then(res => res.json());
}

function getPosts(userId) {
  return fetch(`/posts?user=${userId}`).then(res => res.json());
}

// Fill in the blanks
async function loadData() {
  const user = _____ getUser();
  const posts = _____ getPosts(user.id);
  console.log(posts);
}

hard

A. await, await

B. await, then

C. then, await

D. then, then

Solution

1. Step 1: Understand async function usage

   Inside async functions, use await to wait for Promises step-by-step.

2. Step 2: Apply await to both calls

   Both getUser() and getPosts() return Promises, so both need await.

3. Final Answer:

   await, await -> Option A

4. Quick Check:

   Use await for sequential async calls [OK]

Hint: Use await for each async call inside async function [OK]

Common Mistakes:

• Mixing then and await inside async function
• Forgetting await causing Promise logs
• Using then without returning inside async