Generators And Iterators

Most functions run to completion and return a single value. Generators break that rule — they can pause mid-execution, yield a value, and resume exactly where they left off. This makes them ideal for producing sequences lazily, handling infinite data, and building powerful iteration utilities.

Understanding generators starts with understanding the iterator protocol JavaScript uses under the hood.

The Iterator Protocol

An iterator is any object with a next() method that returns { value, done }. When done is true, the sequence is finished.

// A hand-rolled iterator for a range of numbers
function createRange(start, end) {
  let current = start;

  return {
    next() {
      if (current <= end) {
        return { value: current++, done: false };
      }
      return { value: undefined, done: true };
    }
  };
}

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

This works, but it is verbose. Generators give you the same behaviour with far less boilerplate.

Generator Functions

A generator function is declared with function*. Inside it, yield pauses execution and sends a value to the caller. Calling the function does not run any code — it returns a generator object that implements the iterator protocol.

function* countdown(from) {
  while (from > 0) {
    yield from--;
  }
  yield "Liftoff!";
}

const launch = countdown(3);
console.log(launch.next()); // { value: 3, done: false }
console.log(launch.next()); // { value: 2, done: false }
console.log(launch.next()); // { value: 1, done: false }
console.log(launch.next()); // { value: 'Liftoff!', done: false }
console.log(launch.next()); // { value: undefined, done: true }

Each call to next() runs the function body until the next yield, then freezes it. Local variables and the position in the function are preserved between calls.

Because generator objects are also iterable (they have a [Symbol.iterator] method that returns this), you can drop them straight into a for...of loop or spread them.

function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

// Take the first 8 Fibonacci numbers from an infinite sequence
const fib = fibonacci();
const first8 = Array.from({ length: 8 }, () => fib.next().value);
console.log(first8); // [0, 1, 1, 2, 3, 5, 8, 13]

// Use for...of with a finite generator
function* range(start, end, step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i;
  }
}

for (const n of range(0, 10, 2)) {
  process.stdout.write(n + " ");
}
// 0 2 4 6 8 10

The infinite fibonacci() generator never throws — it only runs as far as you pull values from it. This is lazy evaluation: work is done on demand, not up front.

Passing Values Back In

next() can accept an argument that becomes the result of the yield expression inside the generator. This turns generators into two-way communication channels.

function* calculator() {
  let result = 0;
  while (true) {
    const input = yield result;
    if (input === null) break;
    result += input;
  }
  return result;
}

const calc = calculator();
calc.next();       // Start the generator (runs to first yield)
console.log(calc.next(10).value); // 10
console.log(calc.next(25).value); // 35
console.log(calc.next(5).value);  // 40
console.log(calc.next(null));     // { value: 40, done: true }

The first next() call with no argument starts execution up to the first yield. After that, each value passed to next() feeds back into the generator.

Making Objects Iterable

You can make any object work with for...of by adding a [Symbol.iterator] method. Generators make this concise.

const playlist = {
  tracks: ["Intro", "Main Theme", "Battle", "Credits"],

  *[Symbol.iterator]() {
    for (const track of this.tracks) {
      yield track;
    }
  }
};

for (const track of playlist) {
  console.log("Now playing:", track);
}

// Spread also works
console.log([...playlist]);
// ['Intro', 'Main Theme', 'Battle', 'Credits']

The *[Symbol.iterator]() shorthand defines a generator method directly on the object.

Delegating with `yield*`

yield* delegates to another iterable, yielding all of its values in sequence. It works with any iterable — arrays, strings, other generators.

function* letters() {
  yield "a";
  yield "b";
}

function* numbers() {
  yield 1;
  yield 2;
}

function* combined() {
  yield* letters();
  yield* numbers();
  yield* "cd"; // Strings are iterable character by character
}

console.log([...combined()]); // ['a', 'b', 1, 2, 'c', 'd']

This is useful for flattening or composing sequences without loading everything into memory at once.

Try It Yourself

Build a paginate generator that slices an array into pages of a given size, yielding one page at a time. Then consume it with for...of to print each page.

function* paginate(items, pageSize) {
  for (let i = 0; i < items.length; i += pageSize) {
    yield items.slice(i, i + pageSize);
  }
}

const products = [
  "Laptop", "Mouse", "Keyboard", "Monitor",
  "Headphones", "Webcam", "Desk", "Chair"
];

let pageNumber = 1;
for (const page of paginate(products, 3)) {
  console.log(`Page ${pageNumber++}:`, page);
}

// Page 1: ['Laptop', 'Mouse', 'Keyboard']
// Page 2: ['Monitor', 'Headphones', 'Webcam']
// Page 3: ['Desk', 'Chair']

Try changing pageSize to 2 or 5, or swap in a different array. Notice that paginate never builds the full list of pages upfront — it only computes each slice when asked.

Key Takeaways

An iterator is an object with a next() method returning { value, done } — the protocol that powers for...of, spread, and destructuring.
A generator function (function*) returns a generator object that is both an iterator and an iterable.
yield pauses execution and sends a value out; calling next() resumes from that exact point.
Generators enable lazy evaluation — values are produced on demand, making infinite sequences safe and efficient.
Passing an argument to next(value) injects it back as the result of the yield expression, enabling two-way communication.
yield* delegates to another iterable, composing sequences without nesting loops.
Add *[Symbol.iterator]() to any object to make it natively iterable with for...of and spread.

Pro Tip: Generators shine when you need to model a sequence that is too large (or infinite) to store in memory, or when producing the next value is expensive. Instead of building an array upfront, yield values on demand. Libraries like RxJS and async iteration patterns (for await...of) build directly on this protocol — once you understand generators, a lot of modern JavaScript architecture clicks into place.