function createIds() {
let i = 0;
while (true) {
return i++; // This doesn't work like I want...
}
}
// He wanted a new ID every time he called it.
// Instead, he got "0" every time.

How to pause, resume, and control the flow of execution.

---

Timothy was staring at a frozen screen. He forced a reload, but he looked defeated.

function createIds() {
let i = 0;
while (true) {
return i++; // This doesn't work like I want...
}
}
// He wanted a new ID every time he called it.
// Instead, he got "0" every time.

"I’m trying to create a system that generates unique IDs forever," Timothy explained. "But if I use a loop, it hangs the browser. If I don’t use a loop, the variable resets every time I call the function."

Margaret pulled up a chair. "You are running into the Run-to-Completion rule," she said.

"Normal functions are like a sprint," she continued. "Once they start, they cannot stop until they finish. You need a function that can pause."

The Asterisk

Margaret wrote a new symbol on the board.

function* createIds() { ... }

"This is a Generator Function," she said. "Notice the asterisk (*). This tells the engine that this function behaves differently. It doesn’t run straight through. It yields control back to you."

The yield Keyword

She rewrote Timothy’s code using the new syntax.

function* createIds() {
let i = 0;
while (true) {
yield i++;
}
}

"Wait," Timothy said. "You still have while(true). Won’t that crash the browser with an infinite loop?"

"No," Margaret smiled. "Because of yield. When the engine hits yield, it pauses the function completely. It saves the variable i, steps out of the function, and gives the value to you. The loop effectively freezes in time."

The Packet: { value, done }

Timothy looked at the code. "So how do I un-freeze it?"

"A Generator doesn’t return a value directly," Margaret explained. "It returns a Generator Object. You control that object using .next()."

She wrote the usage code, but this time she showed the full output.

const idGenerator = createIds(); // The function is "ready", but hasn't started.

console.log(idGenerator.next());
// Output: { value: 0, done: false }
// The function ran, hit 'yield 0', and paused.

console.log(idGenerator.next());
// Output: { value: 1, done: false }
// It woke up, incremented 'i', and paused again.

"It returns a packet," Margaret said. "Value is what you asked for. Done tells you if the function has finished running. Since we are in an infinite loop, done will always be false."

The Iterator Protocol (for...of)

"Do I always have to drive it manually?" Timothy asked.

"Not at all," Margaret said. "Because Generators follow the standard Iterator Protocol, you can drop them right into a for...of loop."

for (const id of createIds()) {
console.log(id);
if (id > 5) break; // We stop the infinite loop externally!
}

"This is Lazy Evaluation," she added. "We aren’t creating a million IDs in memory. We are creating them one by one, only when the loop asks for them."

Two-Way Communication

"It gets even more interesting," Margaret added. "You can also pass data back into the function when you resume it."

She modified the example to accept a reset command.

function* createIds() {
let i = 0;
while (true) {
const reset = yield i++; // We receive data here
if (reset) {
i = 0;
}
}
}

const gen = createIds();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next(true).value); // 0 (We sent "true" back in!)

Timothy watched the output. "So I’m having a conversation with the function. I ask for a value, it gives one and waits. I ask again, it continues."

The Conclusion

Timothy looked at his infinite loop. It was no longer a browser-killer; it was a useful tool.

"I always thought functions were strict," Timothy said. "Start, run, finish."

"Most are," Margaret agreed. "But Generators give you control over Time. You decide when the code moves forward."

"And if you think pausing sync code is cool," she whispered, "wait until you see Async Generators handling network requests. But that is a story for another day."

---

Aaron Rose is a software engineer and technology writer at tech-reader.blog and the author of Think Like a Genius.