Await keyword behavior in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to wait for the promise to resolve before logging the result.

Javascript

async function fetchData() {
  const result = [1] fetch('https://api.example.com/data');
  console.log(result);
}

Drag options to blanks, or click blank then click option'

Aawait

Bthen

Creturn

Dasync

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'then' instead of 'await' inside async functions.

Forgetting to mark the function as async.

Using 'return' instead of 'await' to get the resolved value.

The await keyword pauses the function until the promise resolves, so result holds the resolved value.

2fill in blank

medium

Complete the code to correctly handle the resolved value from the async function.

Javascript

async function getNumber() {
  return 42;
}

async function showNumber() {
  const num = [1] getNumber();
  console.log(num);
}

Drag options to blanks, or click blank then click option'

Aawait

Bget

Cthen

Dasync

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function without await and getting a promise instead of the value.

Using 'then' without returning or handling the promise properly.

Using await before getNumber() waits for the promise to resolve and assigns the value 42 to num.

3fill in blank

hard

Complete the code to correctly handle the promise inside a non-async function.

Javascript

function loadData() {
  fetchData().[1]((data) => {
    console.log(data);
  });
}

Drag options to blanks, or click blank then click option'

Aawait

Bthen

Casync

Dreturn

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use 'await' inside a non-async function causing syntax errors.

Forgetting to handle the promise with 'then' or async/await.

You cannot use await inside a non-async function. Instead, use then to handle the promise.

4fill in blank

hard

Fill both blanks to create an async function that waits for two promises and logs their sum.

Javascript

async function sumAsync() {
  const a = [1] fetchNumberA();
  const b = [2] fetchNumberB();
  console.log(a + b);
}

Drag options to blanks, or click blank then click option'

Aawait

Breturn

Casync

Dthen

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'then' instead of 'await' inside async functions.

Forgetting to await one of the promises causing addition of promises instead of numbers.

Both a and b must await their promises to get the resolved numbers before adding.

5fill in blank

hard

Fill all three blanks to create an async function that fetches data, processes it, and returns the result.

Javascript

async function processData() {
  const data = [1] fetchData();
  const processed = [2] process(data);
  return [3];
}

Drag options to blanks, or click blank then click option'

Aawait

Bprocessed

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Not awaiting the process function causing a promise to be returned.

Returning the wrong variable or the unresolved promise.

First, await the data fetch, then await the processing, and finally return the processed result.