Hackernoon logoHow To Yield Generators (Javascript) by@evelynstender

How To Yield Generators (Javascript)

image
Evelyn Stender Hacker Noon profile picture

@evelynstenderEvelyn Stender

Brazilian living in London. Passionate about coding

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}
.

A

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.