What is Generator in JS?

In JavaScript, a Generator is a special type of function that can pause and resume its execution. It allows you to define an iterator, which can yield multiple values lazily, one at a time, rather than returning all values at once.

Generators are useful when dealing with sequences of data or handling asynchronous tasks

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

const gen = myGenerator();

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

How a Generator Works

1. First call to next(): The function starts executing until it hits a yield statement, then it pauses and returns the yielded value.
2. Subsequent calls to next(): The generator resumes where it left off, continuing execution until the next yield or until it completes.

Example: Generator with Multiple yield Statements

function* countUpTo(max) {
  let count = 1;
  while (count <= max) {
    yield count;  // Pause and return count
    count++;
  }
}

const counter = countUpTo(5);

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

Using Generators with for...of

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

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

Generator Return and done Property

Once a generator finishes, it will return done: true. You can also use the return() method to explicitly return a value from the generator, which will terminate the iteration.

function* myGenerator() {
  yield 1;
  yield 2;
  return "Done"; // Terminates the generator
}

const gen = myGenerator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: "Done", done: true }
console.log(gen.next()); // { value: undefined, done: true }

Generator Functions with Parameters

function* myGenerator() {
  const value1 = yield "First yield";
  const value2 = yield value1 + " and second yield";
  return value2;
}

const gen = myGenerator();
console.log(gen.next()); // { value: "First yield", done: false }
console.log(gen.next("Received from first yield")); // { value: "Received from first yield and second yield", done: false }
console.log(gen.next("Final value")); // { value: "Final value", done: true }