Await keyword behavior in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of async function with await

What is the output of this code snippet?

Javascript

async function test() {
  const result = await Promise.resolve('Hello');
  console.log(result);
}
test();

A undefined

B Promise { 'Hello' }

C Hello

D SyntaxError

💡 Hint

Remember that await unwraps the resolved value of a Promise.

The await keyword waits for the Promise to resolve and returns the resolved value, which is 'Hello'. So console.log prints 'Hello'.

❓ Predict Output

intermediate

Await with non-Promise value

What will this code output?

Javascript

async function example() {
  const val = await 42;
  console.log(val);
}
example();

A Promise { 42 }

B 42

C undefined

D TypeError

💡 Hint

Await can be used with non-Promise values too.

Await treats non-Promise values as resolved Promises and returns the value directly. So val is 42.

❓ Predict Output

advanced

Await inside non-async function

What happens when this code runs?

Javascript

function test() {
  const result = await Promise.resolve('Done');
  console.log(result);
}
test();

A Promise { 'Done' }

B Done

C ReferenceError

D SyntaxError

💡 Hint

Await can only be used inside async functions or modules.

Using await inside a regular function causes a SyntaxError because await is only valid inside async functions or top-level modules.

❓ Predict Output

advanced

Order of execution with await

What is the order of console output when this code runs?

Javascript

async function run() {
  console.log('Start');
  await new Promise(resolve => setTimeout(resolve, 0));
  console.log('End');
}
run();
console.log('After run');

A Start\nAfter run\nEnd

B Start\nEnd\nAfter run

C After run\nStart\nEnd

D End\nStart\nAfter run

💡 Hint

Await pauses the async function but does not block the main thread.

The function logs 'Start', then awaits a Promise that resolves after 0ms, so the main thread continues and logs 'After run' before 'End'.

🧠 Conceptual

expert

Await behavior with rejected Promise

What happens when this code runs?

Javascript

async function test() {
  try {
    await Promise.reject('Error occurred');
  } catch (e) {
    console.log('Caught:', e);
  }
}
test();

A Caught: Error occurred

B Uncaught (in promise) Error occurred

C SyntaxError

D undefined

💡 Hint

Await throws if the Promise rejects, so catch block runs.

The rejected Promise causes await to throw, which is caught by the catch block, logging 'Caught: Error occurred'.

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