await expressions

Learn to iterate async iterables with for await...of.

The for await...of loop

Sometimes a list produces promises and you want to wait for each in order. The for await...of loop walks async iterables and awaits each item.

async function processUrls(urls) {
  for await (const url of fetchEach(urls)) {
    console.log(url);
  }
}

This loop works only inside an async function. Each iteration resolves the next promise, so items are processed in order.

What is an async iterable?

An object is async iterable when it has a Symbol.asyncIterator method. That method returns a next() function; each next() call returns a promise. for await...of calls this machinery automatically.

const stream = {
  async *[Symbol.asyncIterator]() {
    yield 'a'; yield 'b';
  }
};
for await (const x of stream) { /* ... */ }

Async generators (async function*) are the most common source of async iterables.

Exercise Write an async loop

Write async function processUrls(urls). Inside it, use for await (const url of fetchEach(urls)) to walk each url and print it with console.log(url).

Show example solution

async function processUrls(urls) {
  for await (const url of fetchEach(urls)) {
    console.log(url);
  }
}

Test yourself

When do you use for await...of?
- To walk an object's properties
- To await an array of promises in parallel
- To reject a promise
- To await an array of promises one by one
Show answer

To await an array of promises one by one — Correct! for await...of walks async iterables in order.

Complete the for await loop

async function processUrls(urls) {
  ____ (const url of fetchEach(urls)) {
    console.log(url);
  }
}

Show answer

async function processUrls(urls) {
  for await (const url of fetchEach(urls)) {
    console.log(url);
  }
}

Match for await...of concepts

for await (const x of s)

walks an async iterable
Symbol.asyncIterator

the async iterator symbol
async function*

defines an async generator
yield value

produces a value asynchronously

Next lesson: Summary - async/await

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies