How to Understand Generators in JavaScript

A regular function runs from start to finish and returns one value. A generator function can pause its own execution at any point and yield multiple values over time. Each time the generator is resumed, it continues from exactly where it paused. This ability to pause and resume makes generators fundamentally different from all other JavaScript functions.

Declare a generator function by placing an asterisk after the function keyword, writing function* instead of function. When a generator function is called, it does not execute its body immediately. Instead, it returns a generator object. No code inside the generator runs until you explicitly ask for the first value by calling next on the returned object.

Inside a generator function, the yield keyword pauses execution and sends a value out to the caller. When next is called on the generator object, execution resumes from after the last yield point and runs until it encounters the next yield or reaches the end of the function. Each yield creates a natural pause point in the function's execution.

Each call to the generator's next method returns a plain object with two properties. The value property contains the yielded value or the final return value. The done property is a boolean that is false while the generator still has more yield statements to execute and true when the generator function has returned or has no more yields. Once done is true, subsequent calls to next always return value undefined and done true.

You can communicate back into a running generator by passing a value as an argument to next. The yielded expression inside the generator receives that passed value as its result. The first call to next always has its argument ignored because there is no suspended yield expression yet when the generator first starts. This two-way communication channel makes generators useful for building coroutines.

Generators are ideal for producing sequences of values on demand without computing them all upfront. You can write a generator that yields the next value in an infinite mathematical sequence each time next is called. Since values are computed one at a time only when requested, you can represent infinite sequences that would be impossible to store in a regular array without running out of memory.

A generator object is both an iterator and an iterable, meaning you can use a for-of loop directly on it. The loop automatically calls next on each iteration, extracts the value property, and stops when done becomes true. Spread syntax, destructuring assignment, and Array.from also work with generators because they all use the iterable protocol internally.

Before async and await existed, generators were used with promise-yielding libraries like co to write asynchronous code that looked synchronous. A runner function would call the generator, receive a yielded Promise, wait for it to resolve, and then pass the resolved value back into the generator. Today async and await implement this pattern natively, but understanding generators helps you understand how async and await work conceptually under the hood.