Suggest an edit

Improve this article

Refine the answer for “What are generators in JavaScript?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Generators** are JavaScript functions that pause mid-execution and resume exactly where they left off, producing values one at a time via the `yield` keyword.

## Theory

### TL;DR

- Think of a vending machine: you insert a coin (`.next()`), get one item (`yield` value), and the machine waits for the next coin instead of dispensing everything at once.
- Regular functions run to completion and return once. Generators return an iterator object immediately and produce values lazily, one per `.next()` call.
- Use generators when processing large datasets or infinite sequences where loading everything into memory at once is not practical (typically 10k+ items).
- `function*` and `yield` are not optional syntax sugar. They are what make a function a generator.

### Quick example

```javascript
function* numberGen() {
  yield 1;  // pauses here on first .next()
  yield 2;
  yield 3;
  return 4; // final value, then done: true
}

Each `.next()` resumes from the last `yield`, returns `{ value, done }`, and pauses again. After `return`, every subsequent `.next()` returns `{ value: undefined, done: true }`.

### Key difference from regular functions

A regular function runs to completion the moment you call it and returns one value. A generator returns an iterator object immediately, without running any body code. The body starts only on the first `.next()`, then pauses at each `yield`. This is lazy evaluation: values compute only when requested, not upfront.

### When to use generators

- **Large or infinite data**: Generate paginated API results, number ranges, or tree traversals on demand instead of building a full array first.
- **State machines**: Track multi-step processes like game turns or form wizards without a class.
- **Two-way communication**: Pass values back into a running generator via `.next(value)`, used heavily in Redux-Saga.
- Skip generators for simple one-shot computations. Regular functions are the right tool there.

### How V8 compiles generators

V8 compiles `function*` into a state machine. Each `yield` becomes a state transition point. The generator object holds a pointer to a suspended execution context. When you call `.next(arg)`, the engine resumes from that state, and `arg` becomes the return value of the `yield` expression inside the function. That is why you can send values back in, not just get them out.

### Common mistakes

**Expecting the generator to run on creation**

```javascript
function* gen() { yield 1; }
const g = gen(); // g is an iterator, NOT the value 1
console.log(g);  // Generator {}
```

No code runs until you call `.next()`. Creating the generator and running it are two separate steps.

**Forgetting to check `done: true`**

```javascript
function* gen() { yield 1; }
const g = gen();
g.next(); // { value: 1, done: false }
g.next(); // { value: undefined, done: true }
console.log(g.next().value); // undefined - generator is exhausted
```

After the generator returns, all subsequent `.next()` calls give `{ value: undefined, done: true }`. Use a `while` loop to guard against this:

```javascript
let result = g.next();
while (!result.done) {
  console.log(result.value);
  result = g.next();
}
```

**Accidentally sharing state across instances**

```javascript
let count = 0;
function* sharedGen() { yield count++; }

const g1 = sharedGen(); g1.next(); // { value: 0, done: false }
const g2 = sharedGen(); g2.next(); // { value: 1, done: false } - shared outer count!
```

Each invocation shares the outer closure. Move state inside to get independent generators:

```javascript
function* gen() { let count = 0; yield count++; }
```

**Misunderstanding value injection on the first `.next()`**

Any argument you pass to the first `.next()` call is silently discarded. No `yield` expression inside the function is waiting to receive it yet. From the second call onwards, the argument to `.next(arg)` becomes the return value of the previous `yield` expression. The Advanced example below shows a full walkthrough.

### Real-world usage

- **Redux-Saga**: Effects like `call()` and `takeEvery()` are built on generator pausing. The saga middleware calls `.next()` with resolved values to coordinate async operations.
- **Node.js streams**: `readableStream[Symbol.asyncIterator]()` uses async generators for backpressure handling (Node 10+).
- **Infinite sequences**: ID generators, number ranges, or test data factories where you don't know upfront how many values you need.
- **Paginated DB queries**: Fetch in batches, yielding each page, without loading the full dataset into memory.

I used this pattern in a Node.js service processing 500k+ user records. Loading everything at once caused memory spikes. Switching to a generator that fetched batches of 500 kept memory flat for the entire run.

### Follow-up questions

**Q:** How do you iterate over a generator?
**A:** Three ways: `for...of` (auto-calls `.next()` until `done: true`), spread operator (`[...gen]` converts to array), or a manual `while (!result.done)` loop. Use `for...of` unless you specifically need the result as an array.

**Q:** What is `yield*` and how does it differ from `yield`?
**A:** `yield` pauses with a single value. `yield*` delegates to another iterable or generator and yields all its values in sequence. It is shorthand for a loop that yields each item from the inner iterable one by one.

**Q:** Can a generator handle errors?
**A:** Yes. Call `.throw(err)` on the generator to inject an error at the current `yield` point. If the generator wraps that `yield` in `try/catch`, it handles the error and continues. If not, the error propagates to the caller.

**Q:** What is the memory benefit of generators over arrays for large sequences?
**A:** An array holding 1 million items allocates memory for all of them upfront. A generator produces one value per `.next()`, reusing the same execution context with no extra stack allocation. For infinite sequences, an array is simply not an option.

**Q:** How do generators connect to async iteration (senior-level)?
**A:** `async function*` combines generators with promises. Each `yield` can await an async operation before producing a value. The caller iterates with `for await...of`. V8 handles this via bytecode suspension, the same mechanism as regular generators but integrated with promise resolution.

## Examples

### Basic: range generator with `for...of`

The simplest real use case: generating a number range without building an array.

```javascript
function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i; // pauses after each value
  }
}

for (const num of range(1, 5)) {
  console.log(num); // 1, 2, 3, 4, 5
}
// for...of handles .next() and the done check automatically
```

`for...of` calls `.next()` internally and stops when `done: true`. No manual loop boilerplate needed.

### Intermediate: paginated database fetch

Fetching users page by page, without loading all records into memory at once.

```javascript
function* fetchUsersPaginated(pageSize = 5) {
  let page = 0;
  while (true) {
    const users = fetchUsersFromDB(page, pageSize); // hypothetical DB call
    if (users.length === 0) return; // stops when no more data
    yield users; // one page at a time
    page++;
  }
}

const userGen = fetchUsersPaginated();

console.log(userGen.next().value); // [user1, user2, user3, user4, user5]
console.log(userGen.next().value); // [user6, user7, user8, user9, user10]
// only the current page is in memory at any given moment
```

The generator pauses after each `yield users` and only fetches the next page when you call `.next()` again. Memory usage stays predictable regardless of total record count.

### Advanced: two-way communication via `.next(value)`

The pattern that trips up most developers. Values flow both out (via `yield`) and in (via `.next(arg)`).

```javascript
function* auctionGen() {
  const bid = yield 'Waiting for first bid'; // pauses; 'bid' gets the argument of the next .next()
  const counterBid = yield `Current high: ${bid}`; // pauses again
  yield `Sold for ${Math.max(bid, counterBid)}`;
}

const auction = auctionGen();

console.log(auction.next());     // { value: 'Waiting for first bid', done: false }
console.log(auction.next(100));  // 100 becomes 'bid' → { value: 'Current high: 100', done: false }
console.log(auction.next(150));  // 150 becomes 'counterBid' → { value: 'Sold for 150', done: false }
```

Redux-Saga uses exactly this mechanism. The saga middleware sends resolved promise values back into the generator via `.next()`, letting sagas read async results as synchronous assignments.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts1353 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.