Back to Home

Understanding Generators

Generator functions are a special type of function in JavaScript that can be paused and resumed, allowing you to control the execution flow.

What is a Generator?

A generator is a function that can be exited and later re-entered, with its context (variable bindings) saved across re-entrances.

Key characteristics:

Defined using function* syntax
Uses yield keyword to pause execution
Returns an iterator when called
Maintains state between invocations

function* simpleGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

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

Basic Generator Demo

Generator Execution Flow

Passing Values to Generators

You can pass values back into a generator using the next(value) method.

function* communicatingGenerator() {
  const x = yield 'Give me a value';
  const y = yield 'Give me another value';
  return x + y;
}

const gen = communicatingGenerator();
console.log(gen.next());        // {value: 'Give me a value', done: false}
console.log(gen.next(10));      // {value: 'Give me another value', done: false}
console.log(gen.next(20));      // {value: 30, done: true}

Two-way Communication

Error Handling in Generators

Generators can handle errors using try/catch blocks and the throw() method.

function* errorHandlingGenerator() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } catch (err) {
    yield 'Error caught: ' + err.message;
  }
  yield 'Generator continuing after error';
}

const gen = errorHandlingGenerator();
console.log(gen.next());  // {value: 1, done: false}
console.log(gen.throw(new Error('Something went wrong')));
// {value: 'Error caught: Something went wrong', done: false}
console.log(gen.next());  // {value: 'Generator continuing after error', done: false}

Error Handling Visualization

Practical Examples

Infinite Sequence Generator

function* infiniteSequence() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const numbers = infiniteSequence();
console.log(numbers.next().value); // 0
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
// ... can go on forever

Fibonacci Sequence Generator

Async Generators and Iteration

Generators can be combined with Promises to handle asynchronous iteration.

async function* asyncGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

async function runAsyncGenerator() {
  const gen = asyncGenerator();
  for await (const value of gen) {
    console.log(value);
  }
}

runAsyncGenerator(); // 1, 2, 3