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}

.next()

To create a generator function we need to use the

*

function* generator(i){ ... }

This is because

*

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() 

yield

next() 

yield

yields

{value: undefined, done: true}

A

return

done

true

yields

return

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

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