What are generators and iterators in JavaScript?

The iterator protocol is the contract behind for...of, spread and destructuring. An object is iterable if it has a Symbol.iterator method that returns an iterator with a next() method.

function* countTo(limit) {
  for (let value = 1; value <= limit; value++) {
    yield value;
  }
}

const iterator = countTo(3);
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 }

Why generators are useful

• Lazy evaluation: values are produced only when requested
• Custom iteration over trees, paginated APIs or infinite sequences
• Cleaner state machines than manual index bookkeeping
• yield* delegates to another iterable

function* ids() {
  let id = 0;
  while (true) {
    yield id++;
  }
}

const nextId = ids();
console.log(nextId.next().value); // 0
console.log(nextId.next().value); // 1

Async generators combine async and function* and are consumed with for await...of. They are useful for streaming results from paginated APIs or server-sent events.