What are generators in JavaScript?
A generator is a special function that can pause and resume, producing a sequence of values one at a time instead of all at once.
yield — pauses the function and emits a value; calling .next() resumes it.
Lazy — values are produced on demand, so generators can model infinite sequences.
Iterable — they work directly with for...of and spread.
Used for: custom iterators, lazy data streams, and (historically) managing async flow before async/await.
// Basic generator
function* countdown(n) {
while (n > 0) {
yield n; // Pause here, return n
n--; // Resume here on next()
}
}
const gen = countdown(3);
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: undefined, done: true }
// Iterable — works with for...of
for (const n of countdown(5)) console.log(n); // 5, 4, 3, 2, 1
// Infinite sequence
function* fibonacci() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const fib = fibonacci();
const first10 = Array.from({ length: 10 }, () => fib.next().value);
// [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
// yield* delegates to another generator
function* concat(...iterables) {
for (const iter of iterables) {
yield* iter; // Delegate
}
}
console.log([...concat([1, 2], [3, 4])]); // [1, 2, 3, 4]function* defines a generator. yield pauses and returns a value. next() resumes until the next yield. Generators are iterable (work with for...of and spread).
Infinite fibonacci generates values on demand — no memory issues. yield* delegates to another iterable/generator.
Show yield pausing/resuming, for...of compatibility, and an infinite sequence (fibonacci). yield* for delegation is an advanced detail. Generators are rarely used directly in modern code (async/await replaced their async use case) but are important for understanding iterators.