<andres-carmona />

TIL #11: Symbol.asyncIterator
First published on
on html, javascript

Symbol.asyncIterator

I am re-reading some parts of the JavaScript reference on MDN and came across several JavaScript features that were unknown to me and are very interesting.

In this case, an object with a Symbol.asyncIterator property that is also a generator, and can produce (yield) values that are then consumed in a for await loop. Simply awesome!

const delayedResponses = {
  delays: [500, 1300, 3500],

  wait(delay) {
    return new Promise((resolve) => {
      setTimeout(resolve, delay);
    });
  },

  async *[Symbol.asyncIterator]() {
    for (const delay of this.delays) {
      await this.wait(delay);
      yield `Delayed response for ${delay} milliseconds`;
    }
  },
};

(async () => {
  for await (const response of delayedResponses) {
    console.log(response);
  }
})();

// Expected output: "Delayed response for 500 milliseconds"
// Expected output: "Delayed response for 1300 milliseconds"
// Expected output: "Delayed response for 3500 milliseconds"

Every time I learn something new like this, I feel as if my brain releases dopamine 🧠🤤.