REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

await

AI & DATA SCIENCE // await

await pauses an async function until a Promise settles. It unwraps the resolved value or throws the rejection.

Syntax

async function getData() {
  const response = await fetch('/api/data');
  const json = await response.json();
  return json;
}

Deep Dive Course

**await** makes asynchronous code look synchronous. It can only be used inside `async` functions (or at the top level of ES modules). When a Promise rejects, await **throws** the rejection — handle it with try/catch. Multiple `await` calls execute sequentially; use `Promise.all()` for parallel execution.

1Understanding await

await makes asynchronous code look synchronous. It can only be used inside async functions (or at the top level of ES modules). When a Promise rejects, await throws the rejection — handle it with try/catch. Multiple await calls execute sequentially; use Promise.all() for parallel execution.

💡

Avoid sequential awaits that could run in parallel: 'const [a, b] = await Promise.all([fetchA(), fetchB()])' is 2x faster than 'const a = await fetchA(); const b = await fetchB()'.

editor.html

async function getUserWithPosts(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(userId);
    return { user, posts };
  } catch (e) {
    console.error('Failed:', e.message);
    return null;
  }
}

// Parallel (2x faster)
async function getUserWithPostsFast(userId) {
  const [user, posts] = await Promise.all([
    fetchUser(userId),
    fetchPosts(userId)
  ]);
  return { user, posts };
}

localhost:3000

2Practical Example

Here is a real-world application of await showing how it is used in production JavaScript code.

editor.html

// Top-level await (ES modules only)
const config = await fetch('/config.json').then(r => r.json());
console.log(config.apiUrl);

localhost:3000

3Best Practices

Follow these guidelines when working with await:

1. Use try/catch around await for error handling

2. Run independent awaits in parallel with Promise.all()

3. Always mark functions that use await as async

⚠️

Tip: Avoid sequential awaits that could run in parallel: 'const [a, b] = await Promise.all([fetchA(), fetchB()])' is 2x faster than 'const a = await fetchA(); const b = await fetchB()'.

editor.html

async function getUserWithPosts(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(userId);
    return { user, posts };
  } catch (e) {
    console.error('Failed:', e.message);
    return null;
  }
}

// Parallel (2x faster)
async function getUserWithPostsFast(userId) {
  const [user, posts] = await Promise.all([
    fetchUser(userId),
    fetchPosts(userId)
  ]);
  return { user, posts };
}

localhost:3000

Examples

Example 01Basic Usage

async function getUserWithPosts(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(userId);
    return { user, posts };
  } catch (e) {
    console.error('Failed:', e.message);
    return null;
  }
}

// Parallel (2x faster)
async function getUserWithPostsFast(userId) {
  const [user, posts] = await Promise.all([
    fetchUser(userId),
    fetchPosts(userId)
  ]);
  return { user, posts };
}

Example 02Advanced Example

// Top-level await (ES modules only)
const config = await fetch('/config.json').then(r => r.json());
console.log(config.apiUrl);

Best Practices

Use try/catch around await for error handling
Run independent awaits in parallel with Promise.all()
Always mark functions that use await as async

Interview Question

What happens when an awaited Promise rejects?▼

Hint: It throws.

When an awaited Promise rejects, await throws the rejection reason as an error. Without try/catch, this unhandled rejection propagates as an uncaught error. With try/catch around the await, the catch block handles it. This is equivalent to .then().catch() but with synchronous-looking code.

Exercises

MediumPractice using await in a real scenario.

View Solution

async function getUserWithPosts(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(userId);
    return { user, posts };
  } catch (e) {
    console.error('Failed:', e.message);
    return null;
  }
}

// Parallel (2x faster)
async function getUserWithPostsFast(userId) {
  const [user, posts] = await Promise.all([
    fetchUser(userId),
    fetchPosts(userId)
  ]);
  return { user, posts };
}

Frequently Asked Questions

What happens when an awaited Promise rejects?▼

Related Functions

PromisesthencatchAsync-Errortrycatch