Iterators and Generators

1What Makes Something "Iterable"

An object is iterable if it implements a method at the special key Symbol.iterator that returns an iterator — an object with a .next() method returning { value, done }.

const arr = [10, 20, 30];
const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

This is the exact mechanism for...of, spread (...), and destructuring all rely on internally — anything implementing this protocol works with all three, automatically.

2Built-in Iterables

for (const char of "hi") console.log(char);       // "h", "i"
for (const [k, v] of new Map([["a", 1]])) console.log(k, v); // "a" 1
// for (const x of { a: 1 }) {}  // TypeError: {a:1} is not iterable

3Building a Custom Iterable

Implementing Symbol.iterator on your own object makes it work with for...of, spread, and destructuring:

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    return {
      next() {
        if (current <= end) {
          return { value: current++, done: false };
        }
        return { value: undefined, done: true };
      },
    };
  }
}

for (const n of new Range(1, 5)) console.log(n); // 1, 2, 3, 4, 5
console.log([...new Range(1, 3)]);                  // [1, 2, 3] — spread works too
const [first, second] = new Range(1, 5);            // destructuring works too

4Iterable vs Array-Like

An array-like object has a length and numeric indices, but no Symbol.iterator — for...of and spread do not work on it directly.

function example() {
  console.log(typeof arguments[Symbol.iterator]); // "function" — arguments IS iterable
}

const fakeArrayLike = { 0: "a", 1: "b", length: 2 }; // NOT iterable
// [...fakeArrayLike]; // TypeError
Array.from(fakeArrayLike); // ["a", "b"] — Array.from handles array-likes AND iterables

Array.from is the standard bridge for converting either array-likes or iterables into a real array.

⚠️ Common Pitfalls

1. Assuming all objects with length are iterable — array-likes need Array.from or manual conversion; they don't work with for...of/spread directly.
2. Manually calling .next() and forgetting to check .done — reading .value after done: true gives undefined, easy to misinterpret as a real value of undefined.
3. Re-using a "used up" iterator — once an iterator reaches done: true, calling .next() again typically keeps returning done: true; get a fresh iterator (or a fresh for...of pass over the iterable) to iterate again.

1What a Generator Is

A generator function (function*) is a function that can pause and resume its own execution, automatically implementing the iterator protocol for you — no manual { value, done } objects required.

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i; // pause here, hand `i` out, wait to be resumed
  }
}

const gen = range(1, 3);
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

for (const n of range(1, 3)) console.log(n); // 1, 2, 3 — generators ARE iterables

Calling a generator function does not run its body immediately — it returns a generator object. Execution only proceeds up to the next yield each time .next() is called.

2Rewriting the Custom Range Class from Part 1

class Range {
  constructor(start, end) { this.start = start; this.end = end; }
  *[Symbol.iterator]() {   // generator method — no manual next()/done object needed
    for (let i = this.start; i <= this.end; i++) yield i;
  }
}
for (const n of new Range(1, 3)) console.log(n); // 1, 2, 3

Generators are the standard, much simpler way to implement Symbol.iterator compared to hand-writing the protocol from Part 1.

3yield Can Receive Values Back

function* echo() {
  while (true) {
    const received = yield "waiting for input";
    console.log("got:", received);
  }
}
const gen = echo();
gen.next();          // starts the generator, runs to the first yield
gen.next("hello");   // resumes, `received` becomes "hello", logs "got: hello"

The argument passed to .next(value) becomes the result of the yield expression that was paused — a two-way communication channel between caller and generator.

4yield* — Delegating to Another Iterable

function* inner() { yield 1; yield 2; }
function* outer() {
  yield 0;
  yield* inner(); // delegates — yields everything inner() yields, in order
  yield 3;
}
console.log([...outer()]); // [0, 1, 2, 3]

5Infinite Sequences (Lazy Evaluation)

Generators only compute values as they're requested — this makes infinite sequences practical:

function* naturalNumbers() {
  let n = 1;
  while (true) yield n++;
}

function take(iterable, count) {
  const result = [];
  for (const value of iterable) {
    if (result.length >= count) break;
    result.push(value);
  }
  return result;
}

take(naturalNumbers(), 5); // [1, 2, 3, 4, 5] — never actually generates beyond what's needed

A plain array could never represent this — it would need infinite memory. A generator computes values lazily, one at a time.

6Generators for Error Handling

function* worker() {
  try {
    yield 1;
    yield 2;
  } catch (e) {
    console.log("caught inside generator:", e.message);
  }
}
const g = worker();
g.next();
g.throw(new Error("stop")); // injects an error at the paused yield point

function* counter() {
  let count = 0;         // this local variable lives inside the generator's HEAP-allocated frame,
  while (true) {           // not a normal stack frame — it survives between .next() calls
    count += 1;
    yield count;
  }
}

⚠️ Common Pitfalls

1. Forgetting generators are lazy — nothing runs until .next() is called; a generator function's body does not execute at all just by calling it.
2. Infinite generators without a break condition in the consumer — for...of over naturalNumbers() with no break will loop forever.
3. Reusing an exhausted generator — once done, a generator object cannot be restarted; call the generator function again to get a fresh one.
4. Confusing yield with return — return value inside a generator sets { value, done: true } on that final .next() call and ends iteration; for...of does NOT include this final returned value in its iteration (only done: false values are yielded to for...of).

📋 Quick Reference

function* gen() { yield x; }         → generator function
gen().next()                          → { value, done }
yield* otherIterable                  → delegate to another iterable
for (const v of gen()) {}             → generators are iterables

🎤 Interview Q&A

🛠️ Practice exercises

Each exercise is a file in this topic folder. Code exercises are self-checking: run them and make the checks pass.

Source: js_iterators_and_generators_theory_1.md, js_iterators_and_generators_theory_2.md · generated by tools/build_lessons.py