What is the difference between async iterable and iterable in JavaScript?

What is the difference between async iterable and iterable in JavaScript?

In JavaScript, an iterable is an object that can be iterated over using a for...of loop, like arrays. An async iterable, on the other hand, is designed for asynchronous iteration, allowing you to use await within a for await...of loop.

Can you give me an example of each?

Sure! For an iterable, you can use an array:

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

For an async iterable, you might fetch data from an API:

async function* asyncGenerator() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  for (const item of json) {
    yield item;
  }
}

for await (const item of asyncGenerator()) {
  console.log(item);
}

When would I use async iterable instead of just iterable?

You would use async iterable when dealing with data that is fetched asynchronously, such as from a database or an API, where you want to process items as they arrive without blocking the execution.

Are there any performance differences between the two?

Yes, async iterables can introduce some overhead due to the asynchronous nature, but they allow for better handling of I/O-bound tasks. Iterables are generally faster for synchronous data.