Press "Enter" to skip to content

Generators in JavaScript

good Monday morning mmm lamps in last

week’s video which we can find there or

in the episode description we looked at

iterators in this video we’re going to

look at generators which is a super

weird and foreign and magical concept

until you realize that it’s just a same

syntactic sugar to easily create

iterators I am your host mpj and you are

watching on function


today’s episode is sponsored by tipped

up and they are currently hiring if you

know someone who would like to work with

react native and nodejs in the heart of

Stockholm send them to tip-top calm / f

FF that link is also in the episode

description let’s have a look at the

custom Dragon army iterator example from

last week’s video if you’re thinking

about skipping last week’s video on

iterators and trying to understand

generators without understanding

iterators that’s not possible you need

to understand iterators in order to

understand generators watch that video

that said maybe you did last week so let

me give you a quick recap of how this

code works so we’re pulling in make

dragon here which is a function that

makes a random dragon string so it just

produces something like this medium time

dragon or medium eyes dragon or big time

dragon or medium time dragon or tiny

fire dragon you get next we have this

dragon army object that we can iterate

over with a for loop for instance so we

drag it right over the Dragon army and

it gives us a dragon for each iteration

and you see here that on the first

iteration it’s a tiny fire dragon whoops

on the first iteration is a tiny fire

dragon on the second iteration medium

fire dragon medium time dragon tiny eyes

dragon each yeah you get it and it gives

us a random amount of dragons on on each

run as you see here as I run it multiple

times see you’re like oh my god it

changes every time the way this works is

that dragon army has a special property

this is the interface for an iterable

object that has that is set to a factory

function which in turn will return an

object with a property called next that

is a function that gives us the next

iteration of the thing we rating of that

of the army the iteration object is

something like this it’s it’s an object

that has

a value which is now the iterated dragon

and then it has a returns also a

property that says if the iteration is

done or not are there more things to

iterate should we end that’s what the

dawn property means so every time we

call next which is what the for loop

does internally we check if enough

Dragons have been spawned which is a

just a random thing and if they’re not

we return an iteration where we make a

dragon and set that to the value if we

if not Dragons have been spawn we just

return an iteration object which has

done set to two and that tells the for a

loop here to be like that we’re done by

the way if you think that this in line

evaluation thing that I’m going here is

cool then the name of that plug-in is

called quokka you can find it at

Crockett Fonfon function calm

it’s a sponsor of the show what I’m

gonna do is I’m going to replace this

iterator factory here like this with a

generator it’s going to do exactly the

same thing I’m just gonna use the

generator to create the iterator factory

instead for comparison I’m going to just

comment this out I’m gonna steal that go

to write function star then I’m going to

do something that is very typical of

generators I’m going to write while it

true then I’m going to grab this this is

becoming very slow because it gets stuck

in an infinite loop hang on I’m gonna

comment this out for just a bit and yeah

enough during a spawn if enough dragon

spawned we’re going to return because

we’re done right there are no more

dragons but if we’re not done if enough

dragons haven’t been spawned we’re going

to oh my god new keyword you know what

what does it mean what what is it that

we’re gonna do with it I’m going to

yield a dragon make track Punk and now

we’re done so

and we just move here OOP so you see

like wow now it works that’s the same

thing as as this this this little thing

replaced this it’s a lot shorter let me

actually close that and it’s going to

demonstrate to you that this is just the

same thing so if if we call a dragon

army this symbol got it alright our call

that that that does give us an iterator

just like the this thing did in fact let

me just steal this out and just delete

this so that we are not distracted and

I’m gonna just call this thing some

dragons no sorry

that way the start kind of throws you

off somehow for some reason so calling

some dragons that gives us an iterator

okay fine constant rate or let’s sign

that your variable and remember from the

last episode what we do with iterators

if we work on consuming them like for

off does this internally for us but if

we want to do it like on our own we can

do iterator dot next up and what does

that give us eyes that gives us today an

iteration object which has a value and

something that tells us if we’re done or

not so let’s just call that a couple of

times and see what it gives us okay so

we see here that we get three dragons

medium lightning dragon a tiny lightning

dragon big fire dragon and we are not

done we’re not done here we’re not on

here but then we’re done we’re out of

dragons and it doesn’t matter how many

times we called iterator after that

we’re still done still we’re not getting

more so with that in mind let’s go back

to the D generator and look at what

we’re how does so it just

keeps looping here just keeps looping on

to infinity until it terminates here

that’s intelligence so what happens is

that we’re looping here okay while true

true is always true so it just keeps

looping checks if enough Dragons have

been spawned and if enough Dragons have

been spun it returns so this will just

completely terminate the thing and that

that is what happens here but if we

haven’t enough dragons we continue and

then we hit the yield keyword and that

will yield a dragon and that is going to

kind of pause the function and just push

your dragon up and then until the

outside world calls next on the iterator

it’s not gonna do anything but when it

does does get the next just continues

running here and then goes back up to

while and yes continues and check if it

enough dragons born and yes

does this and until it does doesn’t do

it anymore and fendron

and return I’ll screw you this is

actually still very confusing you’ve

rehearsed this a lot and you’re making

it feel easy but it’s it’s really not

I’ve confused

let’s some let’s remove the wiring and

yes we have a lot of conditionals and

weird things something like a loop I

guess make this even easier or simpler

like yes let’s just deal the things

manually yield fluffykins some dragon

there and then we yield mark the the

fine dragon you see here as I yield

these values we and as we call next

we’re getting them out here as as as

iteration objects and then we’re done

and you can also room it also try to

remember it in this context that it in

JavaScript the there is always a

implicit return undefined at

at the end of a function so if you don’t

return manually in a JavaScript function

it will return undefined because a

function will always return so might

continue yielding some values here or we

can do anything we want so what like

Hardy the dog he’s not a dragon

we don’t mind everyone’s welcome this is

weakly typed which there are no strong

classes here and if we return even if we

early return that means that the

generator is terminated and any like we

will never reach any other yield

statement so let’s see like if not

random is above first 0.5 then we yield

hardly the dog no sorry then we know

then we return so now we sometimes don’t

get hardly the dog and that is because

we did this early return here and notice

that even though we have more code here

calling iterator next multiple times

it’s not going to give us anything the

the the generator the the iterator is

its terminate its it is done and it’s

returned it’s done but before it’s done

it’s when yielding like this it we kind

of the function is the generator is a

generator function it’s kind of paused

and that is that that’s something that I

find kind of a helpful mental mental

model when it comes to generators think

of them as possible functions and to

illustrate that I’m gonna remove or the

iterator next statements now thanks to

quokka we actually have these handy code

coverage indicators here on the left so

red mean red gray means that this code

has not been executed which is pretty

interesting given that we are calling

some dragons here so let me see like


that the fact that we caught some

dragons doesn’t mean that this is

executed and that is because all calling

a generator function doesn’t actually

cause it to run yet it gives us an

iterator which allows us to go to the

next step in the generator it’s kind of

like a remote for a TV like the TV it

allows you to turn on the TV and switch

the channels the iterator is your remote

control to run the generator right so

let’s call next on the iterator and see

what happens

hmm it’s a rect or dot next what does

that gives us that it gives us an

iteration with value fluffykins the

Dragons and we’re not done yet and we

see here that this first line is now

executed but not the rest not the rest

it has forced here and returned this

value puffkins dragon – that’s the

return value – iterator but next so that

we get pumpkins – dragons but after that

nothing happens it stops or it just just

doesn’t do anything the generator is

waiting for us to use our remote control

our iterator to depress next and until

then the generator is continued so let’s

let’s do that actually iterator dot next

let’s see what that gives us so that

gives us our mark the fine dragon and

we’re still not done so you see here

that this value here has ended up here

as an iteration object and again you see

here that mmm we never reach these two

lines let’s continue calling and see

what happens

Oh the code coverage is poop brown that

is confusing it’s because we are like

many things are happening on one line

this it’s a lot easier if we separate it

on two lines instead so that we can

properly see the

restaurant so we see here that on this

run we did not return and that meant

that we continue down here and yielded

hardly the dog and that gave us an

iteration where the value was hardly the

dog this is interesting though we’re

we’re not done even though we’re clearly

at the end of the thing and remember

that the the yield keyword pauses the

function and waits for the next next

call of the iterator before it continues

so this is actually paused just before

this thing happens the the implicit and

the place it return undefined that

happens you know happens in every

function in JavaScript

so when we call iterator dot next this

is gonna be be what happens like the

we’re gonna get done true because we use

return and we are going to get a value

on the file because that’s what we

return we can actually do this a little

bit nicer if we like we could do this

return hardly the dog and that then this

thing will never be reached you see here

like oh sorry you know the random thing

is all that now here’s the case where

they were hardly the dog is generally

see here that okay now we get hardly the

dog and we also get a done true so this

next iteration will never happen so if

you call return with a value that will

end up being a thing that you get out of

calling next when calling it from the

outside I notice here that if I just

call run this a couple of times you see

here that okay this time around we

didn’t get hardly the dog because this

this thing here turned return false so

just true sorry return true and that

made us return early as you see here if

we are doing this explicit like

this is actually what happened when you

just type return in JavaScript this is

what that the effect is so that’s a gist

of how generators work but I really want

to go back to my earlier statements that

they are just like a syntax sugar that

helps us to easily create iterators just

to make sure that you trust me on that

and go to rewrite some dragons as a

normal function it’s going to do exactly

the same thing but we’re going to do it

with just returning iterators let me

comment this out what to do a function

mmm sound dragon I need a mutable

variable called it race shuns it’s gonna

begin at minus 1 then we’re gonna create

the iterator mmm right mm-hmm

and remember an iterator well yes you

can see here that an iterator is

something that we can call next on


and next is supposed to give us the next

object in the thing anything and the

next object is going to be the first

object which is fluffykins some dragon

but mmm well let’s actually do that

return lovekins the dragon but remember

that an iterator does not want the just

the value because it needs to know if

we’re done or not the outside world

needs to know that so in addition to the

value it needs to know what we’re done

and we’re ready ah this for now we’re

actually done because there’s just one

one drivin so far in our iterator right

we’re getting there to mark and hardly

the dog maybe but okay this is not

cannot read probably next upon a fine

that’s because we’re not returning our

iterator so this some dragons so

remember this just returning on the find

so we actually need to return the

iterator okay so our iterator kind of

sort of works gives us the value all the


don’t you let’s let’s continue here we

need to now we need to we want next to

on the second time it’s called we wanted

to return mark the fine dragon so we

need to start incrementing this this

thing the state here that keeps tab on

how many calls we’ve done to the diretor

iterations plus bus and if we if if

iterations yes this is zero then we

return fluffykins but if the iterations

copy/paste programming if that is then

we’re going to return mark the fire

dragon mark the fine line sorry about


and like we’re not done and now we’re

like we’re continuing our dragon thing

here so okay fine this this looks good

so far let us move on to this thing if

math the that we’re gonna return early

if it the rations equals two and also if

this thing is stuff then we’re going to

return party they don’t value party the

dot and then then we’re actually we can

actually done don’t chew and if

otherwise we actually just return we’re

done there’s nothing more to do here and

that’s and this is it let me reduce the

size here because this is a quite a bit

of coding you need to see it all

oh that’s tiny sorry for you mobile

people you have to squint but now you

see here that

iterator next iterator necks gives us

some dragon and if we run this a couple

of times we sometimes get hardly the dog

so as you can see here nothing magical

about an iterator so we can always do

what a generator does using a normal

function that returns an iterator but as

you see here generators are still great

because like this is this is very terse

and in my opinion very readable so last

week we looked at iterators today we

have looked at generators but we’re

still just scratching the surface of all

this for example iterators can be

consumed by other things than the for

loop or manually like we did here

iterators can be as synchronous and

generators can also be a synchronous

nowadays and therefore of loop has a for

a wait keeper so that can be a

synchronous as well there is so much

cool stuff that we can learn about this

if you’re interested please post a

comment down below on what you would

like to hear now and again today’s

episode was sponsored by tip top if you

know someone who would like to work with

react native and nodejs in the heart of

stockholm send them to tip-top comm

slash app and app that ladies also can

be episode-description and that’s it you

are just watch an episode of fun fun

function I release these every Monday

morning Oh 800 GMT if you are forgetful

you can subscribe here or watch another

episode right now by clicking here

I am mvj until next Monday morning thank you

Please follow and like us: