Await keyword behavior in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the await keyword do in JavaScript?

It pauses the execution of an async function until the Promise after await settles (resolves or rejects), then resumes with the resolved value or throws the rejection.

beginner

Can await be used outside of an async function?

No, await can only be used inside async functions or in top-level modules that support top-level await.

intermediate

What happens if you await a non-Promise value?

The value is converted to a resolved Promise automatically, so await returns the value immediately without delay.

intermediate

How does await affect the event loop?

await pauses the async function but allows other code and events to run in the event loop until the awaited Promise settles.

intermediate

What is the difference between await and .then()?

await makes asynchronous code look synchronous and pauses execution, while .then() registers callbacks without pausing execution.

Where can you use the await keyword in JavaScript?

A Only inside callback functions

B Inside async functions or top-level modules with top-level await

C Only inside regular functions

D Anywhere in the code

await works only inside async functions or in modules that support top-level await.

What does await do when given a non-Promise value?

A Throws an error

B Waits indefinitely

C Returns the value immediately as if it was a resolved Promise

D Converts it to a rejected Promise

await treats non-Promise values as resolved Promises and returns them immediately.

What happens to the rest of the program when an async function hits await?

A Only the async function pauses; other code continues running

B The whole program stops

C The browser reloads

D The event loop freezes

Only the async function pauses at await, allowing other code and events to run.

Which of these is a key difference between await and .then()?

A <code>await</code> pauses execution; <code>.then()</code> does not

B <code>.then()</code> pauses execution; <code>await</code> does not

C Both pause execution

D Neither pause execution

await pauses the async function, making code look synchronous; .then() uses callbacks without pausing.

If a Promise rejects, what happens when you use await on it?

A The rejection is ignored

B The Promise resolves instead

C The program crashes immediately

D The async function throws an error at the <code>await</code> line

When a Promise rejects, await throws an error that can be caught with try/catch.

Explain how the await keyword changes the flow of an async function.

Think about how <code>await</code> makes asynchronous code easier to read.

Describe the difference between using await and .then() for handling Promises.

Consider how the code looks and behaves when using each.

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