The relationship between the Iterator pattern and generator functions

The iterator pattern is a behavioral design pattern that allows sequential access to the elements of an aggregate object without exposing its underlying representation. Generator functions are syntactic sugar in JavaScript for implementing iterators. While the two are closely related in traversing data, they differ in implementation and applicable scenarios.

Core Concepts of the Iterator Pattern

The iterator pattern consists of two key components: the iterable object (Iterable) and the iterator (Iterator). In JavaScript, any object that implements the [Symbol.iterator] method is an iterable object. When this method is called, it returns an iterator object, which must implement the next() method.

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

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

A classic example of manually implementing the iterator pattern:

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 { done: true };
      }
    };
  }
}

const range = new Range(1, 3);
for (const num of range) {
  console.log(num); // 1, 2, 3
}

Mechanism of Generator Functions

Generator functions are declared using the function* syntax. When called, they return a generator object (which is also an iterator). Their uniqueness lies in the ability to pause execution and return intermediate values using yield:

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

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

Generator functions can greatly simplify iterator implementation. The previous Range class rewritten using a generator:

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  *[Symbol.iterator]() {
    for (let i = this.start; i <= this.end; i++) {
      yield i;
    }
  }
}

Differences in Asynchronous Programming

The iterator pattern is typically used for synchronous data traversal, whereas generators combined with yield can pause execution, giving them unique advantages in asynchronous programming:

function* asyncGenerator() {
  const result1 = yield fetch('https://api.example.com/data1');
  const data1 = yield result1.json();
  
  const result2 = yield fetch(`https://api.example.com/data2?id=${data1.id}`);
  return yield result2.json();
}

// Requires a runner function to execute
async function runGenerator(generator) {
  const iterator = generator();
  let result = iterator.next();
  
  while (!result.done) {
    try {
      const value = await result.value;
      result = iterator.next(value);
    } catch (err) {
      result = iterator.throw(err);
    }
  }
  
  return result.value;
}

Memory Efficiency Comparison

Generator functions have a clear advantage in memory efficiency when handling large datasets due to their support for lazy evaluation:

function* generateLargeArray() {
  for (let i = 0; i < 1e6; i++) {
    yield i;
  }
}

// Does not immediately consume memory
const largeArrayIterator = generateLargeArray();

In contrast, traditional array iteration requires pre-generating the complete dataset:

function createLargeArray() {
  const arr = [];
  for (let i = 0; i < 1e6; i++) {
    arr.push(i);
  }
  return arr;
}

// Immediately consumes significant memory
const largeArray = createLargeArray();

Typical Use Cases for Combined Usage

Generator functions can be combined to form complex data processing pipelines:

function* filter(predicate, iterable) {
  for (const item of iterable) {
    if (predicate(item)) {
      yield item;
    }
  }
}

function* map(transform, iterable) {
  for (const item of iterable) {
    yield transform(item);
  }
}

const numbers = [1, 2, 3, 4, 5];
const processed = map(
  x => x * 2,
  filter(x => x % 2 === 0, numbers)
);

console.log([...processed]); // [4, 8]

Error Handling Mechanisms Compared

Iterator implementations typically require manual error handling:

class SafeRange {
  constructor(start, end) {
    if (start > end) throw new Error('Invalid range');
    this.start = start;
    this.end = end;
  }

  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    
    return {
      next() {
        if (current > end) {
          throw new Error('Iteration exceeded bounds');
        }
        return { value: current++, done: false };
      }
    };
  }
}

Generator functions, on the other hand, can use try-catch for more intuitive error handling:

function* safeGenerate(start, end) {
  if (start > end) throw new Error('Invalid range');
  
  try {
    for (let i = start; i <= end; i++) {
      if (i > end * 2) {
        throw new Error('Iteration exceeded bounds');
      }
      yield i;
    }
  } catch (err) {
    console.error('Generator error:', err);
    throw err;
  }
}

Deep Integration with Language Features

JavaScript has deep integration with generators, such as the yield* syntax for delegating to another generator:

function* gen1() {
  yield 2;
  yield 3;
}

function* gen2() {
  yield 1;
  yield* gen1();
  yield 4;
}

console.log([...gen2()]); // [1, 2, 3, 4]

This feature makes generators more suitable than traditional iterators for building complex control flows. For example, implementing recursive traversal:

function* traverseTree(node) {
  if (!node) return;
  yield node.value;
  yield* traverseTree(node.left);
  yield* traverseTree(node.right);
}

State Retention Capability

Generator functions automatically maintain execution state, whereas manually implemented iterators require explicit state management:

// Traditional iterators require manual state preservation
class StatefulIterator {
  constructor() {
    this.state = 0;
  }

  next() {
    return {
      value: this.state++,
      done: false
    };
  }
}

// Generators automatically maintain state
function* statefulGenerator() {
  let state = 0;
  while (true) {
    yield state++;
  }
}

Application Examples in Browser APIs

Modern browser APIs like the Web Locks API also adopt similar patterns:

async function* lockedResources(resources) {
  for (const resource of resources) {
    const lock = await navigator.locks.request(resource.id, async lock => {
      return lock;
    });
    yield { resource, lock };
  }
}