Mastering ES6 Yield: How Generators Pause and Resume Execution

Introduction

ES6 dramatically changed JavaScript, and the yield keyword is one of its most disruptive features. When I first encountered yield in Ember.js, I didn’t understand its purpose, but after studying ES6 I finally grasped its basic idea and was eager to try it out.

Keyword yield

yield

is a keyword, not a function. Like return, it signals a program state: return tells the program what value to output and ends execution, while yield tells the program the current state value and pauses execution at that point.

Because yield is a command‑type keyword, its syntax is simple: the expression after yield is optional, and the return value is a state object. Although it can be viewed as an operator, its primary purpose is pausing and resuming, not calculation.

Generator Functions

ES6 introduced Generators, which I translate as “iterator functions”. A Generator’s main purpose is to produce an iterator. To declare a Generator, place an asterisk (*) between the function keyword and the function name.

Only inside a Generator does yield make sense; outside it has no effect, just as a shark would be useless on land.

Generators do not run immediately after declaration; they start running only when their .next() method is called.

The .next() Method

Calling f.next() starts execution of the Generator f. When the interpreter reaches a yield statement, it pauses and returns an object {value: ..., done: false}. The value field holds the result of the yielded expression, and done indicates whether the iterator has finished.

If .next() is called again, execution resumes after the previous yield. When a return statement is encountered, the iterator ends and done becomes true.

When the code reaches <code>yield '', execution stops; any subsequent arithmetic statements are not executed until the next .next() call.

Methods like for...of, Array.from, and the spread operator rely on the iterator protocol, so without Generators these constructs would not work. In Babel, additional polyfills are required to support Generators.

Parameters of .next()

The argument passed to .next(value) replaces the value of the previous yield. For example, after the first .next() pauses at yield x + 1, calling foo.next(3) substitutes 3 for x + 1, making y = 3. Subsequent yields behave similarly.

Two common questions:

Why can’t the first .next() call receive a parameter? Because there is no previous yield to replace.

Why are parentheses sometimes required after yield? Without parentheses, the following + operation would be lost, changing the result.

Treating yield as a Variable

When a parameter is passed to .next(), it replaces the entire expression following the corresponding yield. This allows creative uses such as building string templates by treating yield like a placeholder variable.

Summary

Key points about yield:

It can only be used inside Generator functions.

Calling .next() runs the Generator until the next yield, then pauses.

The return value of .next() is an object {value, done}.

Subsequent .next() calls resume execution after the previous yield.

When .next() receives an argument, that argument replaces the expression of the preceding yield.

Finally, for...of iterates over the values produced by a Generator by repeatedly calling .next() and using each value as the loop variable.