Generators (function*, yield)

In the last lesson you wrote Symbol.iterator and next() by hand. Generators let you produce the exact same iterators with a fraction of the code — and a superpower normal functions don't have: the ability to pause partway through and resume later.

Learn Generators (function*, yield) in our free JavaScript course — a beginner-friendly interactive lesson with runnable examples, a practice exercise and a…

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

That single feature unlocks infinite sequences, lazy pipelines, and clean state machines.

🎬 Real-World Analogy: A generator is like a TV series you stream:

You declare a generator with function* . Calling it does not run the body — it hands you back a generator object (which is both an iterator and an iterable). The body advances one yield at a time as you call next() .

Look closely: "Generator started" prints only after the first next() , not when we called greetings() . That delayed, on-demand execution is the heart of generators.

Because a generator object already implements the iteration protocol, every iterable-consuming feature works on it with zero extra code. Compare this to the hand-rolled range from the previous lesson:

That entire range is now four lines instead of fifteen. The generator handled all the next() / done bookkeeping for us.

A generator can loop forever because it only produces a value when asked. The consumer decides when to stop. Here is an unbounded id generator and an infinite Fibonacci sequence:

⚠️ Never do [...idMaker()] on an infinite generator — spread tries to drain it completely and your tab will hang. Always bound infinite generators with a counter or a break .

Generators aren't just one-way value pumps. A yield expression also receives the argument you pass to the next next(value) call. This makes generators usable as tiny, resumable conversations:

The value passed to next("Ada") becomes the result of the paused yield , so name ends up as "Ada" . The very first next() takes no argument because there is no paused yield waiting to receive it yet.

yield* delegates to another iterable, splicing all of its values into the current sequence. It is how you build big generators out of small ones:

These lines define a generator and collect its first three values, but they are scrambled. Reorder them so the program logs [ 1, 2, 3 ] .

Why: the generator must be fully declared (B–E) before you can call it (F). The let n = 1 (C) and the infinite while (D) belong inside the function body. Creating the empty array (A) can happen any time before the loop fills it (G), and the log (H) comes last. The infinite loop is safe because c.next() is only called three times.

created then A . Calling g() runs nothing, so "created" prints first. The first next() runs the body up to the yield 1 , printing "A" . "B" never prints because we never call next() a second time.

[ 10, 20 ] — spreading a generator drains it completely, collecting every yielded value into an array. Safe here because the generator is finite.

It logs got hello . The first next() pauses at yield "ready" . The second call next("hello") resumes the generator, and its argument becomes the value of that yield expression, so x === "hello" .

Up next: Strings & String Methods — the workhorse type behind almost every program! 🔤

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary