JavaScript Generators: function* and yield Explained

Generators are functions that can pause their execution and resume it later. They give more control over execution flow, unlike regular functions.

Generators are defined using function* and controlled via the .next() method.

Generator Syntax

function* generatorFunction() {
  yield 'First value';
  yield 'Second value';
  return 'Final';
}

const gen = generatorFunction();

console.log(gen.next()); // { value: 'First value', done: false }
console.log(gen.next()); // { value: 'Second value', done: false }
console.log(gen.next()); // { value: 'Final', done: true }

How Generator Works

• yield — keyword that pauses execution and returns value.
• .next() — resumes execution from the last yield.
• done: true — indicates generator is finished.

Differences from Regular Functions

Generators and Iterators

Generator is an iterator that follows the Iterable protocol. This allows using it in for...of loop.

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for (const num of range(1, 5)) {
  console.log(num); // 1, 2, 3, 4, 5
}

When to Use Generators?

Useful for:

• Working with data streams — e.g., generating sequences.
• Iterable structures — arrays, trees, graphs.
• Execution control — e.g., when manual step-by-step data processing is needed.
• Creating lazy evaluations.
• Simulating async behavior before async/await appeared.