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.

Practice

1. What does the await keyword do in JavaScript?

easy

A. Makes a function synchronous

B. Pauses the execution until a Promise resolves

C. Creates a new Promise

D. Throws an error if used outside a function

Solution

1. Step 1: Understand the role of await

   The await keyword pauses the execution of an async function until the Promise it waits for settles (resolves or rejects).

2. Step 2: Differentiate from other options

   await does not make a function synchronous or create a Promise; it only pauses execution inside async functions.

3. Final Answer:

   Pauses the execution until a Promise resolves -> Option B

4. Quick Check:

   await pauses execution [OK]

Hint: Remember: await pauses until Promise finishes [OK]

Common Mistakes:

• Thinking await makes functions synchronous
• Believing await creates Promises
• Using await outside async functions without error

2. Which of the following is the correct way to use await in JavaScript?

easy

A. const result = fetchData(); await;

B. await const result = fetchData();

C. const result = fetchData() await;

D. const result = await fetchData();

Solution

1. Step 1: Check correct syntax for await

   The correct syntax places await before the Promise-returning function call, like await fetchData().

2. Step 2: Identify invalid syntax

   Options A, B, and C misuse await placement, causing syntax errors.

3. Final Answer:

   const result = await fetchData(); -> Option D

4. Quick Check:

   await goes before the Promise call [OK]

Hint: Put await right before the Promise call [OK]

Common Mistakes:

• Placing await after the function call
• Trying to declare variables with await keyword
• Adding await as a separate statement

3. What will be the output of this code?

async function test() {
  const p = new Promise(resolve => setTimeout(() => resolve('Done'), 100));
  const result = await p;
  console.log(result);
}
test();

medium

A. Done

B. Promise { <pending> }

C. undefined

D. Error: await used outside async function

Solution

1. Step 1: Understand the Promise and await

   The Promise resolves after 100ms with the string 'Done'. The await pauses until this resolution.

2. Step 2: Check console.log output

   After awaiting, result holds 'Done', so console.log(result) prints 'Done'.

3. Final Answer:

   Done -> Option A

4. Quick Check:

   Await waits for Promise result [OK]

Hint: Await unwraps Promise value before logging [OK]

Common Mistakes:

• Expecting Promise object instead of resolved value
• Confusing async function call with synchronous
• Thinking await causes errors outside async

4. Identify the error in this code snippet:

function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve('Data'), 50));
}
const data = await fetchData();
console.log(data);

medium

A. Missing async keyword before function

B. Promise never resolves

C. Cannot use await outside async function

D. Syntax error in Promise constructor

Solution

1. Step 1: Check where await is used

   await is used at the top level, outside any async function, which is not allowed in standard JavaScript.

2. Step 2: Identify correct error cause

   This causes a runtime syntax error because await must be inside an async function.

3. Final Answer:

   Cannot use await outside async function -> Option C

4. Quick Check:

   Await only inside async functions [OK]

Hint: Use await only inside async functions [OK]

Common Mistakes:

• Assuming await works globally
• Thinking async keyword is needed on fetchData only
• Believing Promise never resolves

5. You want to fetch user data and then fetch posts by that user sequentially using async/await. Which code correctly ensures the posts are fetched only after user data is available?

async function getUserAndPosts() {
  const user = await fetchUser();
  const posts = fetchPosts(user.id);
  return posts;
}

hard

A. Add await before fetchPosts: const posts = await fetchPosts(user.id);

B. Remove await from fetchUser to run both in parallel

C. Return posts without awaiting to speed up

D. Use Promise.all with fetchUser and fetchPosts

Solution

1. Step 1: Analyze the sequence requirement

   Posts must be fetched only after user data is ready, so fetchPosts must wait for user.

2. Step 2: Check code for awaiting posts

   Currently, fetchPosts is called without await, so it returns a Promise immediately without waiting.

3. Step 3: Correct usage

   Adding await before fetchPosts ensures posts are fetched after user data is available.

4. Final Answer:

   Add await before fetchPosts: const posts = await fetchPosts(user.id); -> Option A

5. Quick Check:

   Await each dependent async call [OK]

Hint: Await each async call that depends on previous result [OK]

Common Mistakes:

• Not awaiting dependent async calls
• Trying to run dependent calls in parallel
• Using Promise.all incorrectly for sequential tasks