Await keyword behavior in Javascript

Introduction

The await keyword pauses your code until a task finishes, making it easier to work with things that take time, like loading data.

When you want to wait for data from the internet before continuing.

When you need to pause your code until a file finishes loading.

When you want to make sure one step finishes before starting the next.

When you want to write simpler code that looks like normal steps but handles waiting.

When you want to avoid confusing chains of commands and make your code easier to read.

Syntax

Javascript

let result = await someAsyncFunction();

await can only be used inside async functions.

It waits for a Promise to finish and gives you the final value.

Examples

Waits for the fetch to finish, then parses and prints the data.

Javascript

async function getData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}

Waits one second before printing a message.

Javascript

async function waitAndPrint() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('One second passed');
}

Awaits a Promise that immediately resolves with 42.

Javascript

async function example() {
  let value = await Promise.resolve(42);
  console.log(value); // prints 42
}

Sample Program

This program waits half a second to get a number, then prints it. The await pauses the code until the number is ready.

Javascript

async function fetchNumber() {
  // Simulate a delayed number fetch
  return new Promise(resolve => setTimeout(() => resolve(7), 500));
}

async function main() {
  console.log('Start fetching...');
  let number = await fetchNumber();
  console.log('Number received:', number);
  console.log('Done');
}

main();

Important Notes

If you forget to use async before a function, await will cause an error.

await makes your code wait without freezing the whole program.

You can use await with any Promise, not just fetch or timers.

Summary

await pauses code until a Promise finishes.

It must be inside an async function.

Using await makes asynchronous code easier to read and write.

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