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
[Music]
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
mm-hmm
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
mm-hmm
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
time
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
that
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