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.