Every function you've ever written has one unstoppable habit:once it starts, it runs to the end.There's no pause button. A function is a sprinter — it bursts out of the gate and doesn't stop until it crosses thereturnline (or the closing brace).

function normalFunction() {
  console.log("Start");
  console.log("Middle");
  console.log("End");
}normalFunction();
// Start// Middle// End        ← all three, instantly, no stopping between

But what if a function couldpausemid-execution — hand you a value, freeze in place, and resume exactly where it left off when you ask? What if it could produce valuesone at a time, on demand, instead of computing everything upfront?

That's exactly whatgenerator functionsdo. They're JavaScript's pause-able, resumable functions — and once you understand them, you'll see them powering everything from infinite sequences to async libraries to Redux Saga.

In this lesson:function*, the magicalyieldkeyword, the.next()protocol, and why "lazy" execution is secretly a performance superpower. Let's hit pause. ⏸️

What Is a Generator? The VHS Tape Analogy 📼

Think of a normal function as alive TV broadcast— once it starts, it plays straight through. Miss something? Too bad.

Ageneratoris aVHS tape(or a Netflix stream, for younger readers 😄):

• ▶️ You press play → it plays a bit
• ⏸️ You press pause → itfreezes exactly there
• ▶️ You press play again → itresumes from the freeze frame, not from the start

A generator function doesn'treturnvalues — ityieldsthem, one at a time, pausing between each:

function* myFirstGenerator() {
  console.log("Started! 🎬");
  yield "First value";
  console.log("Resumed after first pause ⏯️");
  yield "Second value";
  console.log("Resumed after second pause ⏯️");
  yield "Third value";
  console.log("Finished! 🏁");
}

Notice thefunction*syntax— the asterisk is what makes it a generator:

function* generator() {
}// ✅ function* (asterisk after function)function *generator() {
}// ✅ function *name (also valid — style choice)function normalFunction() {
}// ❌ regular function — no pause powers

Calling a Generator: Nothing Happens?! 🤔

Here's the first surprise — calling a generator functiondoesn't run its body:

const gen = myFirstGenerator();
// …silence. NOTHING logged. The function hasn't started!

Instead, calling it returns agenerator object— the VHS tape itself, loaded and ready. The tape controls playback through three methods:

Let's press play:

const gen = myFirstGenerator();
console.log(gen.next());
// Started! 🎬// { value: "First value", done: false }
console.log(gen.next());
// Resumed after first pause ⏯️// { value: "Second value", done: false }
console.log(gen.next());
// Resumed after second pause ⏯️// { value: "Third value", done: false }
console.log(gen.next());
// Finished! 🏁// { value: undefined, done: true }

Every.next()returns an object with two properties:

{
  value: /* the yielded value */, done: /* true when finished */
}

Watch the flow carefully:

1. First.next()→ function starts, runs toyield "First value"→pauses, hands you the value
2. Second.next()→resumesfrom the pause, runs to the nextyield→ pauses again
3. Third.next()→ resumes, yields the last value
4. Fourth.next()→ resumes, hits the end →done: true

The functionfroze and resumed three times, keeping all its local state intact between pauses. No normal function can do this.

yield vs return: The Core Difference ⚖️

function* demo() {
  yield "pause 1";
  // ⏸️ hand over value, FREEZE here  yield "pause 2";      // ⏸️ resume, hand over, freeze again  return "final 🏁";    // 🛑 actually ends — done: true}
  const g = demo();
  console.log(g.next());
  // { value: "pause 1", done: false }console.log(g.next());   // { value: "pause 2", done: false }console.log(g.next());   // { value: "final 🏁", done: true }console.log(g.next());   // { value: undefined, done: true } — over

💡 Interview favorite:yield= pause and emit;return= end and emit. A generator can contain manyyields but finishes with either areturnor simply running out of code.

Generators Are Iterables: Hello, for…of! 🔄

Rememberfor…offromLesson 17? Generators work with itautomatically— because generators produceiterators, and iterators are exactly whatfor…ofconsumes:

function* colors() {
  yield "red";
  yield "green";
  yield "blue";
}for (let color of colors()) {
  console.log(color);
}// red// green// blue

No.next()calls needed — the loop drives the generator for you. And since generators are iterable, thespread operatorfromLesson 14works too:

const allColors =[...colors()];
console.log(allColors);
// ["red", "green", "blue"] ✨

The Killer Feature: Lazy Execution 😴

Here's why generators are genuinely powerful: they compute valuesonly when asked— never before. This is calledlazy evaluation.

The Problem Generators Solve

Imagine generating a million IDs:

// 😱 EAGER — builds the ENTIRE array in memory first:function makeIdsEager(count) {  const ids = [];  for (let i = 1; i <= count; i++) {    ids.push(`ID-${i}`);  }  return ids;                    // all 1,000,000 strings, at once 💾💥}
const all = makeIdsEager(1000000);
// memory goneconsole.log(all[0]);                 // …and we only needed the first one!

// 😌 LAZY — makes each ID only when requested:function* makeIdsLazy() {  let i = 1;  while (true) {                     // infinite, but safe!    yield `ID-${i}`;    i++;  }}
const ids = makeIdsLazy();
console.log(ids.next().value);
// "ID-1" — computed on demandconsole.log(ids.next().value);   // "ID-2"console.log(ids.next().value);   // "ID-3"// Memory used: one string at a time ✅

An infinitewhile (true)loop that's perfectly safe— because the generator pauses after everyyield, it never runs away. It only produces the next ID when someone asks. That's lazy execution in a nutshell.

Real Use: Infinite Sequences

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
[a, b] =[b, a + b];
    // destructuring swap ✨  }}
    const fib = fibonacci();
    console.log(fib.next().value);
    // 0console.log(fib.next().value);   // 1console.log(fib.next().value);   // 1console.log(fib.next().value);   // 2console.log(fib.next().value);   // 3console.log(fib.next().value);   // 5// …an endless sequence, generated one number at a time

Trythatwith an array — you'd need infinite memory. Generators make infinity practical.

Two-Way Communication: Sending Values BACK In 📨

Here's the mind-bending part:.next(value)cansend data intothe generator — the pausedyieldexpressionreceivesit:

function* conversation() {
  const name = yield "What's your name? 🤖";
  console.log(`Nice to meet you, ${name}!`);
  const hobby = yield "What's your hobby? 🤖";
  console.log(`${hobby} sounds fun, ${name}!`);
  return "Chat over 👋";
}const chat = conversation();
console.log(chat.next().value);
// "What's your name? 🤖"console.log(chat.next("Priya").value); // logs greeting → "What's your hobby? 🤖"console.log(chat.next("Coding").value);// logs hobby line → "Chat over 👋"

The flow:

1. chat.next()→ runs to firstyield, pauses, hands you the question
2. chat.next("Priya")→"Priya"becomes theresult of the paused yield→name = "Priya"→ runs to the next yield
3. chat.next("Coding")→ same magic forhobby

⚠️ Quirk alert:thefirst.next()can't send a value in — the generator hasn't paused at any yield yet, so there's nothing waiting to receive it. The first call just starts the tape.

This two-way channel is what powered advanced async libraries before async/await existed (and what Redux Saga still uses today).

Delegating with yield* 🔗

yield*(yield-star) forwards toanother generator— like a DJ handing the mic to a guest:

function* appetizers() {
  yield "🥗 Salad";
  yield "🍞 Bread";
}function* mainCourse() {
  yield "🍕 Pizza";
  yield "🍝 Pasta";
}function* fullMenu() {
  yield* appetizers();
  // delegate: yield everything from appetizers  yield* mainCourse();     // then everything from mainCourse  yield "🍰 Dessert";}
  console.log([...fullMenu()]);
  // ["🥗 Salad", "🍞 Bread", "🍕 Pizza", "🍝 Pasta", "🍰 Dessert"]

yield*says:"pause here and yield all of their values first, then continue with mine."It's how you compose small generators into bigger ones.

🛠️ Mini Project: ID Generator + Pagination 📄

Two patterns you'll actually use:

// 🎫 Pattern 1: Unique ID generator (never repeats, zero memory)
function* idGenerator(prefix) {
  let counter = 1;
  while (true) {
    yield `${prefix}-${String(counter).padStart(4, "0")}`;
    counter++;
  }
}const orderIds = idGenerator("ORD");
console.log(orderIds.next().value);
// "ORD-0001"
console.log(orderIds.next().value);
// "ORD-0002"
console.log(orderIds.next().value);
// "ORD-0003"
// …infinitely, one at a time ✅
// 📄 Pattern 2: Lazy pagination over a big dataset
function* paginate(items, pageSize) {
  for (let i = 0;
  i < items.length;
  i += pageSize) {
    yield items.slice(i, i + pageSize);
    // one page per pause
  }
}const products =["A", "B", "C", "D", "E", "F", "G"];
const pages = paginate(products, 3);
console.log(pages.next().value);
// ["A", "B", "C"] — page 1
console.log(pages.next().value);
// ["D", "E", "F"] — page 2
console.log(pages.next().value);
// ["G"]           — page 3
console.log(pages.next().done);
// true — no more pages

Neither pattern loads everything upfront — data materializes only when.next()asks. This is exactly how "infinite scroll" and streaming data pipelines think.

Common Beginner Mistakes (And Fixes)

⚠️ Generators are single-use:

script.js

Copy Code Run Online

const g = colors();
[...g];
// ["red", "green", "blue"]
[...g];
// [] — already exhausted! Call colors() again for a new one.

Quick Self-Check: Lesson 27 Quiz 🧠

1. What two syntax pieces define a generator, and what does each do?
2. What's the output?
   script.js

   Copy Code Run Online

   function* g() {
     yield 1;
     yield 2;
   }const gen = g();
   console.log(gen.next().value);
   console.log(gen.next().value);
   console.log(gen.next().done);

3. Why doesn't a generator's body run when you call the function?
4. What does every.next()call return (name the two properties)?
5. Why iswhile (true)safe inside a generator but deadly in a normal function?

(Answers: 1.function*marks the function as a generator;yieldpauses execution and emits a value · 2. 1, 2, true — the third .next() finds no more yields · 3. Calling it returns a generator object (the "tape") — the body only runs as .next() drives it · 4.{ value, done }— the yielded value and whether the generator is finished · 5. The generator pauses at every yield, so the loop only advances when asked; a normal function's while(true) never stops and freezes the page)