are watching fun fun function a bit of a
lifestyle shot for you for quite a while
people have asked me to do a video on
generators generators is a new feature
in ACMA script 6 oh yes next or yes
harmony or yes like JavaScript 2015 or
whatever it’s a new feature what are
generators a lot of people refer to
generators as possible functions which
is an explanation that I like but I
think that generators in the end is one
of those things that you just have to
see in order to understand them so let’s
get into it when you’re making use of
generators you often make use of
promises as well you don’t have to but
still if you don’t understand promises
and understand promise as well this
video is just gonna make your brain melt
so you need to do that first I have a
video about promises over there that you
can check out so for this example we’re
gonna work with some synchronous code
we’re just gonna fetch something from a
it packing service there’s actually this
cool service for just doing these random
rest cold test things and it’s a JSON
placeholder doctype code calm and when
you curl to it you get this random test
data it’s very useful for
so I have this test file console.log ah
hello and I just run that and say that
generally interested yes hello I’m going
to show you an example with promises
first and to do that we are going to use
the the fetch API to do that because
that is promise based so I’m just gonna
do fetch then and uh yeah we’re gonna
consult of log that I’ll see what
fetch is not the fun yeah
because in the web browser you modern
web browsers is gonna have fetch built
in but we’re running node so we don’t
have that so I’m going to require that
in node goes fetch require no fetch I
think and p.m. install node fetch and we
run that again right we get a big JSON
blob yes okay we get a body object to
response object or something like that
in order to get a JSON body from go get
the body from this as Jason we are going
to do response the response
JD song hello run it again very nice now
we have a JSON object here with a title
think we’re gonna log that out
composites then adopt a post a new post
dot title and we are going to go
no generators chance and we get just the
title here clarify that I will just do
title both the to do title there and run
it again and now it says title here so
this is dealing with a synchronously
silouan as soon using promises and
it’s it’s very standard thing we’re just
passing the your I hear it’s fetching it
and once it’s fetched it it will pass it
to this school back here it’s getting
the response and the response has a
method called JSON which will parse the
body as as Jason and then once it’s done
that it’s going to pass it on to the
next callback as to the next then and
we’re extracting the title from there
and that title is being console logged
out to the console and that is what
we’re seeing here nothing strange about
that but we are going to throw some
generators into the mix now require in a
generators library called Co now Co will
take as its argument a generator
function and that looks like that has
this little star here and that means
it’s a generator function going to
comment coming out this this promise
example here and start copying things
from it I’m going to copy this line here
BAM it’s going to be a little long so
we’re going to break this out into a if
your I oke Oke and now what I’m going to
do is that I’m going to do this response
equal fetch URI so this will uh if I
just if this was just executed straight
off this would this would return a
promise but if I do this ah and let’s do
this
console.log response and I’m going to
execute and show to you what so look at
this this being returned this is not a
promise this is the actual response
object let me further demonstrate that
I’m going to Const post
response dot JSON execute that again
what oh yeah it’s still a response
because I’m echoing the response I want
to echo post like I want I could this
run again and we see that Wow this no
echoes the post so I’m just gonna to
make it the same as the coda Bob I’m
going to just title do to do post don’t
I – and we’re gonna echo title just to
make it exactly the same I’m gonna do
this
we’re honor we run it again and as you
see we now have the same behavior it’s
echoing the title out from there the
posts in the example oh so what I’m
showing you here at this point is
basically just dark magic it’s some new
star syntax as its new yield syntax and
it’s a new coal library so let’s walk
this code through in a calm orderly
manner there’s nothing strange about our
line 12 but here is our first mystery
keyword we recognize this fetch your eye
here from the the last example up here
but yield this is weird what what does
this do so what the generator function
here will do when it reaches the yield
keyword is that it’s going to take the
promised return from fetch and it’s
gonna go hey I don’t know what this
thing is I am going to just deal this to
you the co-ceo and let you deal with it
because I don’t know and I’m not gonna
do
anything more I’m not going to keep
executing until you give me something
that I can work with and the co-function
it’s gonna go like yeah you’re a
generator function you lazy bum I will
deal with this promise for you and it’s
going to take the promise it’s gonna
resolve it and then it’s going to pass
that what whatever the result value is
back into the generator function and
that is what is going to be passed out
here what is going to be assigned to the
response and this is going to be
repeated here on the next line so
responsive JSON that is also going to
return a promise which the generator man
well as soon as it reaches a yield here
it’s going to go what this is another
promise I don’t know what to do with
that I’m going to yield it to you CEO so
that you can deal with it and the CEO
does it resolves a promise and then it
passes it back into the generator which
will assign it here and the rest of the
code here this is nothing strange and
this is nothing strange okay so this
makes it feel a little bit less magic
but we’re only looking at how generators
work from inside of the generator we
don’t know how CEO does this so we are
going to implement our own version of
CEO I’m gonna comment this out and I’m
going to replace this with what are we
gonna call it we’re gonna call it into
remission
I was recently given this a branded USB
power bank and I thought Adam it seems
like it’s not produced in a fully
english-speaking country so I figured
that I would do a dramatic reading for
Powerbank wide compatible USB output
electricity saving funky Kong and
Vuitton mental friendliness and economic
efficiency have LED battery capacity
indicator fashion and beautiful no loss
standby use that time longer high
conversion efficiency the power rating
power conversion is as high as 90
percent above the far higher than
similar products have intellectual
dormancy function when the equipment
used will automatically adjust current
output really play a plug and play for
smart iPhone HTC black family who away I
bet I’m gonna comment this out and I’m
going to replace this with what are we
gonna call it we’re gonna call it magic
well no not really because this is not
particular magic what people call them
run uh let’s call them yeah run let’s
let’s go with that we’re declaring
function run we know that run takes this
right this is it takes a generator and
we are going to yeah we’re this is
running the generator so we’re just
gonna you know run the generator
generator generator and we’re gonna see
what that gives us you know um
console.log run it ah gee thanks node
debugger that was super useful all right
ah that’s not very explain
I’m I happen to know that this gives us
an iterator and iterator is going to
have a next method let’s console of that
out instead a result see what that gives
us all right this is a lot more
explanatory gives us an object here we
and the object has a protocol value
which is a promise that’s that is to be
expected the again the generator has
like I don’t know how to deal with
promises hey run do you deal with this
so it’s given us the the promise here
and it’s also has a property which is
done equals false we’ll talk about that
in a bit later for now the the lacy
generator has asked us to deal with this
promise and that’s what we’re gonna do
let’s let’s take the promise here going
to call this object it the raishin I
think this this object this is what we
were calling an iteration and the
iteration has a promise as its value in
this case duration of value call this a
promise to you and we’re going to or
solve this like you resolve promises
then right so the promise will resolve
to a value going to call it X and we
want to provide the lacy generator with
this value somehow and we do that by
passing it into the iterator again so
we’re gonna call iterator dot next and
we’re gonna pass in the value that got
us nothing really I think it’s acute
this but screw that for now
we’re not getting this far
I think we need to do a console dot log
here to see what is happening response
is response and we run that right BAM so
we recognize this this is the response
object so it worked that far let’s
slowly walk through what is happening so
far so we are passing this generator
here into run run will here on line 21
call generator that will give it an
iterator so far nothing in the Jen the
generator is not being executed yet
however here on line 22 recalling dot
next on the iterator that will actually
start the execution of of of the
generator so it’s going to execute line
12 and then it’s going to start
executing line 13 here and it’s gonna
call fetch and fetch is going to return
promise which the generator is going to
yield one out it’s gonna pause itself
I’m just going to say that hey run you
have to deal with this this promise
because I don’t know how to deal with it
and that is what we’re going to get down
here because the next value will return
an iteration and that iteration will
have a value and that happens to be our
promise because that is what what the
generator the generator yielded then we
use then to resolve the promise
just like you resolve any promise and
when we do we pass it in to the iterator
using next pass a value in here and that
will then yield adhere and assign to
response that’s as far as we are right
now what happens next here is that the
generator since we now have yielded the
response well
two new executing and will log out this
response here and that is what we see
here and then it’s going to be
continuing here calling this response to
JSON and it’s going to yield that up to
the run and that is going to be yielded
here so here we are going to get another
promise I’m gonna call it another
promise for now just to prove this put
to you I’m going to console.log another
promise out another promise we’re gonna
run that oh yeah it’s not strictly true
that it is another promise because it is
and an object containing the promise
here as as a property value so this is
not acts another promise iterating next
is not it’s actually another if the rate
door right now we’re gonna call this
another area another iterator I’m gonna
do the again now it makes a bit more
sense
so another iterator here it’s returning
another iterator and on the value
property it has this promise that we
want let’s do that let’s get that out
another promise
and another iterator equals value that’s
our promise echo that out cool we now
have the promise and that’s a promise
good I’m going to delete this line and
we are going to resolve this promise as
well I’m going to call this why don’t
freak out we will clean that up later
and we are again yes as we did above
going to pass this to the iterator using
next let’s see if that actually got us
the post so I’m going to delete this
response line here and it’s then I’m
going to console.log this out post is
post and we run that let’s see if it got
us what we wanted yes it did
so now post is and we get the response
of the JSON and in fact the entire thing
works we also got the the title here so
I can actually delete this and actually
it now does exactly what CEO did
let me just uncomment this back and run
it again and you’ll see that we just
implemented CEO now that we have the
full implementation of runlets through
this CEO away because we now have our
own implementation ah let’s walk through
this line by line so what first happens
is that we call run here well and we
pass in a generator function so run here
is going to be passed the generator and
the first thing it’s going to do is to
call generator this does not run the
generator that would happen if generator
was a normal function no instead it’s
going to get return an iterator and to
actually get the iterator to run to get
the generator to start running we call
next on it this only this first run we
don’t pass any any argument here because
it’s it’s the first one we used getting
it going it’s going to run this line
here it’s gonna declare this your i/o
variable here and it’s going to pass it
in to fetch fetch is going to resolve or
or return promise and that is going to
go into this yield keyword and the
generator is gonna say like hey I don’t
know what this promise is I’m gonna pass
it to you run do something and give me
something back and this moves us down
here so this gives us this iteration
object and the promise is going to be
the value on the iteration object can
take that promise resolve that promise
using then
like any other promise so this X here in
the first run this is going to be the
response right response to make this a
bit more pedagogical and we are going to
pass that into the next of iterator and
that brings us back to this yield over
here so this is not going into the
response here and we down here is
calling dot Jason on the response object
which will give us another promise which
the generator will again yield out with
to the run function and that is what
happens down here it’s going to get
another iterator here which we extract
into another promise and we do the exact
same thing here resolve it into a new
value so this is going to be the post
and we pass it into the iterator again
as an argument to next and that brings
us back over here yield is going to pass
out this post there and then we execute
a title and then we echo it out and then
we’re here so our run function works for
this specific case because we only have
to yield statements but let’s imagine
that we had like 10 of them then this
wouldn’t work because we will just get a
big pyramid where we just then inside of
this and this so let’s make a recursive
we’re getting a problem here because
promise top then is not a function
because you know promise here it’s not
and it’s it’s not it this is actually a
string so if eat the raishin dot done
yes Shakir like we have this run at the
end run resulted in Valhalla and that is
being a career out here as well run
resulted in do blue blue blue blue blue
blue blue blue awesome let’s make this
here like shove this thing here clean
this up a bit ah indent this here so far
we talked about what generators are and
and we have now looked a bit how to use
them but it’s not clear why yeah
sometimes when I’m explaining
programming concepts on the show I have
I have a clear reason for doing so I’m
super excited about the concept and I
can tell you why that is not the case in
when it comes to generators so when it
comes to programming there’s a lot of
things out there right
even the features being officially
implemented into JavaScript I mean just
because we’ve done that it doesn’t mean
that it’s necessarily a good idea
generators are certainly very cool and
they they allow you to do this treat a
synchronous code sort of like you’re
writing a synchronous code which is like
it there’s something about that that is
very appealing but on the other hand I
feel like promises you know here like
the this if you look at this this
implementation here it’s not really
rocket science I feel like promises are
or are fine like there are problems with
them of course but I don’t feel like
this is like a big massive improvement
generators has this smarty pants why to
them I think they are very very clever
and cool solution to a problem but I’m
not genuinely convinced that it actually
simplifies things but again I’m not sure
it might be that there just hasn’t been
an implementation of this that I have
found compelling or that there’s simply
something that I’m not seeing there
might be something in generators or
there might not be either way I would
love to have a discussion on this what
what do you think uh either leave a
comment down below or perhaps up vote
someone else’s comment that you thought
were insightful on the subject you have
watched an episode of fun fun function I
release lease on Monday mornings ah Oh
800 GMT time if you liked this episode
make sure that you check out the channel
below and see if there are any more
episodes that tickles your fancy maybe
you even could consider subscribing or perhaps follow me on Twitter