How To Yield Generators (Javascript)

First of all, what the heck does yield mean? As a non-native English speaker, I found it very confusing. So based on The Cambridge Dictionary, "yield" is:

"To produce something useful such as information or evidence."

Here are some examples of how to use the word: "Knowing about our past does not automatically yield solutions to our current problems. yield results/benefits: The search for truth is beginning to yield fruitful results."

"A letter found by the FBI last week may yield new clues."

So, now that we know what the word means, let's talk JavaScript.

Generators are a kind of special function that can stop its execution midway and start again from the same point where it stopped after some time. They are basically a combination of functions and iterators.

When you call a generator, it returns an object

{value: value, done: true|false}

, where value is the value to be yielded and done is a Boolean that tells the generator if the

.next()

function will yield a value or undefined.

To create a generator function we need to use the

function* generator(i){ ... }

This is because

tells JavaScript that an iterator object is going to be returned and unlike regular functions, it doesn't start its execution straight away.

Let's have a look at how to use generator functions:

function* generator(i) {
	yield i + 10;
	yield i + 20;
	yield i + 50;
}

const generate = generator(15);

console.log(generate.next()); // {value: 25, done: false}

console.log(generate.next()); // {value: 35, done: false}

console.log(generate.next()); // {value: 65, done: false}

console.log(generate.next()); // {value: undefined, done: true}

When we call the

next()

function, the execution starts. It executes until it finds the first

yield

statement and yields the value. When called again,

next()

will resume the generator function until it finds the next

yield

statement and this cycle ends when there are no more

yields

, finishing with

{value: undefined, done: true}

return

statement in a generator will make the generator finish its execution (like any other function), setting the

done

property

true

and all other

yields

after the

return

will be

undefined

function* generator(i) {  
	yield i + 10;
	yield i + 20;
	return;
	yield i + 50;
}
const generate = generator(15);
console.log(generate.next()); // {value: 25, done: false}
console.log(generate.next()); // {value: 35, done: false}
console.log(generate.next()); // {value: undefined, done: true}

The same applies if an error is thrown: the following

yields

will all be

undefined

You can also yield another generator function by using

yield*

function* func1() {
  yield 73;
}
function* func2() {
  yield* func1();
}
const iterator = func2();
console.log(iterator.next()) // {value: 73, done: false}
console.log(iterator.next()) // {value: undefined, done: true}

Advantages

Lazy loading: it evaluates the value only when there's need for it.

Memory efficient: as we only evaluate values when needed, less memory for storing those values is needed.

Risks

Generators don’t provide random access like arrays and other data structures.

Generators provide one-time access. So you can't iterate through the values again.

Why Use Generators?

I honestly didn't find any use cases for my own code. Researching the internet, I found an interesting article on dev: Use-Cases For JavaScript Generators.

Using JavaScript generators to optimize APIs

Sources

- MDN
- freeCodeCamp