Async iterators — for await...of and async generators
Use async generators and for await...of to consume values that arrive over time. Learn Symbol.asyncIterator and simple async pipelines.
Async iterators — for await...of and async generators is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why async iteration?
Goal: Consume values that may come later.
- for await...of loops over async iterables
- async function* creates async generators
- Symbol.asyncIterator marks an object as async-iterable
- Tiny async map example
async function* and for await...of
An async generator (async function*) yields values that for await...of consumes.
// Use an async generator to yield values (could be delayed in real apps)
(async function () {
async function* countAsync(n) {
for (let i = 1; i <= n; i = i + 1) {
// In real code you could await a delay or I/O here
yield i;
}
}
for await (const x of countAsync(3)) {
console.log("async value:", x);
}
})();
Manual async next()
next() on an async iterator returns a promise that resolves to { value, done }.
// Drive an async iterator manually with await it.next()
(async function () {
async function* two() {
yield "A";
yield "B";
}
const it = two();
console.log(await it.next()); // { value: "A", done: false }
console.log(await it.next()); // { value: "B", done: false }
console.log(await it.next()); // { value: undefined, done: true }
})();
Symbol.asyncIterator on objects
Add [Symbol.asyncIterator]() that returns an async iterator to make an object work with for await...of.
// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
const AsyncTwice = {
from: function (a, b) {
return {
a: a, b: b,
[Symbol.asyncIterator]: async function () {
let step = 0;
return {
next: async function () {
if (step === 0) { step = 1; return { value: a, done: false }; }
if (step === 1) { step = 2; return { value: b, done: false }; }
return { value: undefined, done: true };
}
};
}
};
}
};
for await (const v of AsyncTwice.from("X", "Y")) {
console.log("from object:", v);
}
})();
Async map pipeline
Compose async generators to build tiny pipelines that await each step.
// Async map: transform values lazily while awaiting work
(async function () {
async function* countAsync(n) {
for (let i = 1; i <= n; i = i + 1) {
yield i;
}
}
async function* asyncMap(iterable, fn) {
for await (const v of iterable) {
// fn can be async; await its result
const out = await fn(v);
yield out;
}
}
const doubled = asyncMap(countAsync(4), async function (x) {
// simulate async transform (no real delay for demo)
return x * 2;
});
const collected = [];
for await (const v of doubled) {
collected.push(v);
}
console.log("doubled async:", collected);
})();
Good habits
Tips:
- for await...of needs an async iterable (Symbol.asyncIterator).
- Use async function* to define async generators easily.
- Each next() is awaited; keep work small to stay responsive.
Async iterable basics quiz
Quick check: Async iterable requirement.
Recap
Recap: Use async function* and yield to create async generators. Loop with for await...of, or await next() manually. Build tiny async pipelines with helper generators.
Frequently asked questions
Is the “Async iterators — for await...of and async generators” lesson free?
Yes — the full text of “Async iterators — for await...of and async generators” is free to read here on the web, and the JavaScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Async iterators — for await...of and async generators”?
Use async generators and for await...of to consume values that arrive over time. Learn Symbol.asyncIterator and simple async pipelines. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Async iterators — for await...of and async generators” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Iterable protocol and for...of
- Generator functions, yield, and small pipelines
- Async iterators — for await...of and async generators