1. Introduction
ES6 formalized how JavaScript objects can be looped over with for...of by introducing the *iterator protocol*. Any object that implements this protocol is 'iterable'. Writing an iterator by hand is verbose, so ES6 also introduced *generator functions* — declared with function* and using the yield keyword — which let you write iterators using ordinary, readable control flow that can pause and resume execution on demand.
Cricket analogy: A cricket over is naturally iterable — you can loop through each of the six deliveries with for...of — but writing a manual ball-by-ball tracker is tedious, so a generator function like function* bowlOver() lets you yield each ball one at a time, pausing between deliveries just like a bowler waiting for the umpire's signal.
2. Syntax
// Manual iterator protocol
const manualIterator = {
[Symbol.iterator]() {
let i = 0;
return {
next() {
i++;
return i <= 3 ? { value: i, done: false } : { value: undefined, done: true };
}
};
}
};
// Generator function -- much simpler
function* countTo3() {
yield 1;
yield 2;
yield 3;
}
const gen = countTo3();
gen.next(); // { value: 1, done: false }
for (const n of countTo3()) {
console.log(n);
}3. Explanation
The iterator protocol requires an object to have a [Symbol.iterator] method that returns an iterator — an object with a next() method. Each call to next() returns a { value, done } object: value is the current item, and done is true once there is nothing left to produce. Built-in types like Array, Map, Set, and String already implement [Symbol.iterator], which is why they work with for...of, spread syntax (...), and destructuring.
Cricket analogy: A scorecard's [Symbol.iterator] is like the official over-by-over ball tracker — each call to next() reveals the next delivery as { value: ballOutcome, done: false }, until the over ends with done: true; just as an Array or String already has this built in, a match scorecard is inherently walkable ball by ball.
A generator function, marked with function*, returns a special *generator object* that is both an iterator and an iterable. Calling the generator function does not run its body immediately — it just creates the generator object. Each call to .next() runs the function body until it hits a yield expression, at which point execution *pauses*, the yielded value is returned, and the function's entire state (local variables, position) is preserved. The next call to .next() resumes exactly where it left off.
Cricket analogy: Calling function* bowlSpell() doesn't start the bowler running in immediately — it just hands the umpire a ready generator; each call to .next() runs the delivery until the ball is bowled, yield, pausing with the bowler's exact position and rhythm preserved, resuming for the next ball exactly where he left off.
Gotcha — generators pause and resume, they don't run to completion on the first call: calling countTo3() alone does nothing visible; only successive .next() calls (or a for...of loop, which calls next() internally) drive execution forward one yield at a time. You can also pass a value into .next(value), which becomes the result of the yield expression that was paused, enabling two-way communication with the generator.
Gotcha — infinite generators are safe until consumed eagerly: function* naturals() { let n = 1; while (true) yield n++; } never terminates, so for (const n of naturals()) without a break would loop forever, and [...naturals()] would hang/crash. Always pair infinite generators with a manual .next() call count or a break condition.
4. Example
function* idGenerator() {
let id = 1;
while (id <= 3) {
const reset = yield id;
if (reset) {
id = 1;
} else {
id++;
}
}
return 'done';
}
const ids = idGenerator();
console.log(ids.next()); // first yield
console.log(ids.next()); // second yield
console.log(ids.next(true)); // reset triggers id = 1 again
console.log(ids.next());
console.log(ids.next());
console.log(ids.next()); // returns, done: true5. Output
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 'done', done: true }6. Key Takeaways
- The iterator protocol defines an object with a next() method returning { value, done }.
- An object is iterable if it implements [Symbol.iterator](), enabling for...of, spread, and destructuring.
- Generator functions (function*) return a generator object that is both iterable and an iterator.
- yield pauses execution and returns a value; the next .next() call resumes exactly where it left off, preserving local state.
- Passing a value to .next(value) becomes the result of the paused yield expression, enabling two-way communication.
- Infinite generators are safe to define but must be consumed carefully (e.g. with break or a bounded next() count) to avoid infinite loops.
Practice what you learned
1. What must an object have to satisfy the iterator protocol?
2. What does calling a generator function like `countTo3()` do?
3. What happens when you call .next() on a generator that has already returned?
4. What is the risk of consuming an infinite generator like `function* naturals() { let n = 1; while (true) yield n++; }` with the spread operator?
5. What is the purpose of passing a value into .next(value) on a generator?
Was this page helpful?
You May Also Like
Map and Set in JavaScript
The Map and Set collection types introduced in ES6, their key differences from plain objects and arrays, and common use cases.
Closures in JavaScript
Understand how closures let inner functions remember and access variables from their outer scope, and how loop variable capture can trip you up.
Common Array Methods in JavaScript
Explore the most-used array methods, split into mutating methods that change the original array and non-mutating methods that return a new array.
Promises in JavaScript
Understand the Promise object, its three states, and how .then/.catch/.finally chaining replaces nested callbacks.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics