Imagine Watching a YouTube Playlist

Think about when you watch a YouTube playlist.

  • Normally, if all the videos are already downloaded, you can just play one after another right away.
  • But if some videos need to buffer (load from the internet), you have to wait a little before the next one plays.

That’s what Async Iterators do in JavaScript. They let you loop through a list of things, but instead of getting them instantly, you can wait for each item as it arrives.

Normal Iterators

An iterator is just a way to go through items one by one. Example:

let numbers = [1, 2, 3];
for (let num of numbers) {
    console.log(num);
}

Here, all numbers are ready immediately.

Async Iterators

But what if the items take time to arrive (like data from a server)? That’s when async iterators are useful. They let you loop with for await...of and wait for each item.

Example:

async function* asyncGenerator() {
    yield "First piece of data";
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield "Second piece of data";
}

(async () => {
    for await (let item of asyncGenerator()) {
        console.log(item);
    }
})();

Output:

First piece of data
(wait 1 second)
Second piece of data

Why is this useful?

Async Iterators are perfect when:

  • Data comes in chunks (like streaming a video or downloading files).
  • You want to process items one at a time as they arrive.
  • You don’t want to wait for everything to finish before starting.

Real-Life Analogy

Think of Async Iterators like eating a meal at a restaurant 🍽️:

  • The waiter brings your food in courses (starter, main, dessert).
  • You don’t wait for the entire meal to be cooked before starting.
  • You enjoy each dish as soon as it arrives.

In Short

  • Iterators = get items one by one (all ready now).
  • Async Iterators = get items one by one (but each may take time to arrive).
  • Use for await...of to handle them.

Review Questions

  1. An iterator lets you go through items __________ by __________.
  2. A normal iterator gives you items __________.
  3. An async iterator gives you items that may arrive __________.
  4. The special loop used with async iterators is __________.
  5. In async iterators, the keyword __________ is used to produce values one at a time.
  6. Async iterators are useful when data comes in __________, like video streams.
  7. A real-life analogy for async iterators is eating a meal served in __________.
  8. The opposite of async iterators, normal iterators provide data __________.
  9. In an async generator, we can pause with the keyword __________ before yielding the next value.
  10. Async iterators prevent programs from waiting for everything at once by processing items as they __________.
<
Previous Post
Google Slide Project: The Interactive Museum Guide
>
Next Post
🔄 JavaScript Async Iterators: Making Iterators Work in Async Callbacks