good Monday morning you’re watching a
series where we explore iterators and
today we’re going really bananas we’re
going to explore higher-order iterators
so in the same way that we have
higher-order functions to manipulate
arrays such as map and filter and reduce
we can also build that for a synchronous
iterators that’s is what we are going to
do today I and M DJ’s and you are
watching function
[Music]
today’s show is sponsored by butcher
butcher makes it painless to add
real-time collaboration and
communication features to your shaft
pub/sub feeds you name it
check him out at pusher pumpin function
dot-com
that link is also in the description big
disclaimer it’s summer in sweden which
is amazing because it’s now bright
outside and the furnaces are chirping
but it’s also very warm and the air
conditioning is not working and i have
to close the doors and put out the
lights when i’m recording this so you
might see me become a gradually more and
more sweaty as the video progresses and
anyway higher-order iterators let’s have
a look where we were last time let’s go
to this nice channel called
function and look at the last last
episode and hang on coat from the exit
well it’s broken here so we need to get
a new API key clicking this link here
then we come on let me scroll come on
let me scroll and then yeah it’s clear
this do not cycle and then call method
let’s cool down click this link here and
I guess steal this API key here will
hopefully be expired by the time you
view this with you let me go back to the
code and paste this API key in there
alright to remind you like this is this
infinite stream of images supposedly
cats but there’s some nasty pigs that
have snuck their way in there no oh look
at this flicker tag search here I won’t
be delving too much into this code
because I’ve talked about it in the
previous episode by the way if you’re
just jumping into this video huh you’re
gonna be confused if you want to watch
the full series playlist you can do so
here in addition to the series if you’re
not familiar
when the concept of higher-order
functions then this is a big big big
chance that this is gonna confuse the
hell out of you encounter kind of
assuming that you’re sort of familiar
with them if you’re not I luckily you
have a video series on that too in the
higher-order functions video and then up
accompanying playlist there as well that
you might want to check out that link is
also in the axial description like all
the links anyway let’s have a look at
this code the thing I want to draw the
thing I want to draw your attention to
is this a way to delay thing here
because I added that because if I don’t
yeah you’ll see like it just becomes we
want the stream to be sort of not crazy
and yes not be too eagerly affection
images so what it does is that every
time you get some page data it waits for
two seconds here before yields an urn so
it makes sense for us to do this but
it’s kind of weird that we do it here
inside of the flicker tag search seems
like we’re mixing in like a
responsibility down in the code where
it’s not supposed to be it would be
nicer if these two were separate things
so what we’re going to do is that we’re
going to create a function that takes an
iterator and it returns a delayed
iterator um all right so let’s see how
we do this
I need a bit smaller texts sorry
mobile users let’s create a new function
that we just call function delay row
boom and it’s going to take an iterator
array or iterate on it the right and
it’s going to take a delay
seconds and because we’re in functional
programming this order is more like the
customary thing to do um okay this is a
bit wrong with its section on it the rug
pull but where we want and we want this
to return a delayed version of the
interval so we’re going to just return
an object and again to do this we want
to do like return an object that has a
property and it’s kind of named with a
symbol that is called as soon it no I
see sorry I think it right tour and this
this is supposed to be a function that
creates the delayed iterator or anyone
that needs it so the first thing that we
want to do is to grab the you know inner
iterator of the iterable that we’re
going to create a delayed personal so
post it the red zone we grab the inner
interval if you remove that we’re going
to transform and that is again going to
have a property called symbol or a synth
iterator and that’s the that’s a
function that creates an iterator force
so we call that and now we’re going to
have the iterator here we’re going to
keep this iterator in this closure and
we’re going to create the new iterable
return the new interval that we delayed
interval actually I’m going to just for
pedagogical purposes I’m going to cost
what next
yes function that it’s supposed to give
us the next item in line and this is
just gonna grab the iterate cold next of
the original iterator trigger up next
but it’s going to delay it so all we’re
gonna do is delay gonna call that with
the delay milliseconds one and then
we’re going to wait for that
and once that delay is over we’re gonna
call it to rate your next and this is
what we’re going to return I need to
actually extract flicker tags the lay
thing out of liquor tag search I’m gonna
copy this but you know delays is not
defined put that here and this one is
not defined I see that this results
after seconds so actually let’s just go
hmm anything this notebook
since function I’m actually gonna you
know fork this otherwise we are in
trouble or in trouble I’m going to go I
would overwrite the code of the last
episode and that would probably confuse
the people watching that episode and
you’re gonna find a link this notebook
in the in the episode description and
you can also just fork it like I did
here to play around with it yourself
like observable it’s amazing either way
back to the code delay seconds this late
milliseconds is no longer true I’m gonna
delay seconds there shift enter to run
that and now it seems to compile let’s
see if this works let’s go to flicker
tag search and throw out the delay parts
of it and I’m going to throw out delay
there
so this cats here we now want to create
a delayed version of that delayed come
on if this works
boom cannot be probably symbol
symbolizing iterator of undefined that’s
peculiar
oh it’s I’m done that’s the problem it’s
I’m creating this I created this
variable to make it even more easily
understandable what wasn’t happening and
then I forgot to actually return it so
it confused us are gonna return the bill
later we’ll see if that gives us some
progress
it did not though it still breaks cannot
read symbol a sync iterator or undefined
so cats is undefined that means a
delayed is returning undefined but it
seems to me like this is distinctly not
undefined how is that possible
oh you know what this error is actually
I’m probably looking at the wrong thing
here because I was believing that this
is the undefined thing but looking at
these it’s probably this one that is
wrong see the interval the delayed
function needs an argument for how many
delayed seconds actually so delayed we
need to go delayed like two seconds see
if this works
Oh solved it I was done but then it was
smart that is truly the experience of
being a software developer this this is
actually just some crap I think I can
remove this I’m on this is no longer
code for using a sync generator it’s
gonna like what what I’m gonna call this
this episode we’re going to call it
higher order it directors in JavaScript
BAM
and I’m gonna publish that so that it’s
available to you fine people so what we
did here today was we extract
this two-second delay that every picture
has out of the flicker tag search and we
created this higher-order iterative
function that function that takes an
iterable and it transforms that and
creates a new iterator that is delayed
or new iterable that is delayed we could
like I think it’s going to be confusing
if I name this episode higher-order
iterables but that’s actually what it is
takes an interval and returns a new
interval that has some properties such
as it being delayed this is very similar
to have how array dot map works on how
array dot filter works it creates takes
an array you call a function on it such
as filter and it create which doesn’t
filter the right so in the same way here
we take an iterator and then we return a
delay in rate here that’s why it’s
called higher-order it’s basically a bit
you could call it like a meta iterator
and the next episode I’m going to
explore this a little bit more and
trying to have some more advanced
examples there’s a lot of things that we
can do here as a safety traders are
built into JavaScript we’re probably
going to see a few big libraries
handling this in the future I don’t know
if that maybe there already are I have
no idea if you know please post a
comment down below speaking of which
that’s it if you have any comments or
questions or confusions and confusions
are likely then please post them down
below and I will try to answer or if you
feel like supporting this show you can
be called patron and that gives you
access to the Fonfon
forum which is a fun and friendly place
where we have discussions with other
programmers I hang out there a lot so if
you feel like doing that that it’s very
welcome it’s a very nice place if you
already are a patron there is a link to
a dedicated topic for this specific
video on the copper forum you can find a
link to that one in the episode
description and if you were thinking
about adding some real-time
communication
collaboration to your app do checkout
pusher our sponsor and say hi you have
just watched an episode of fun fun
function I release these every Monday
morning Oh 800 GMT you can subscribe
here so that you don’t miss it or you
can watch another episode right now by
clicking here
I am mpj until next Monday morning stay curious
series where we explore iterators and
today we’re going really bananas we’re
going to explore higher-order iterators
so in the same way that we have
higher-order functions to manipulate
arrays such as map and filter and reduce
we can also build that for a synchronous
iterators that’s is what we are going to
do today I and M DJ’s and you are
watching function
[Music]
today’s show is sponsored by butcher
butcher makes it painless to add
real-time collaboration and
communication features to your shaft
pub/sub feeds you name it
check him out at pusher pumpin function
dot-com
that link is also in the description big
disclaimer it’s summer in sweden which
is amazing because it’s now bright
outside and the furnaces are chirping
but it’s also very warm and the air
conditioning is not working and i have
to close the doors and put out the
lights when i’m recording this so you
might see me become a gradually more and
more sweaty as the video progresses and
anyway higher-order iterators let’s have
a look where we were last time let’s go
to this nice channel called
function and look at the last last
episode and hang on coat from the exit
well it’s broken here so we need to get
a new API key clicking this link here
then we come on let me scroll come on
let me scroll and then yeah it’s clear
this do not cycle and then call method
let’s cool down click this link here and
I guess steal this API key here will
hopefully be expired by the time you
view this with you let me go back to the
code and paste this API key in there
alright to remind you like this is this
infinite stream of images supposedly
cats but there’s some nasty pigs that
have snuck their way in there no oh look
at this flicker tag search here I won’t
be delving too much into this code
because I’ve talked about it in the
previous episode by the way if you’re
just jumping into this video huh you’re
gonna be confused if you want to watch
the full series playlist you can do so
here in addition to the series if you’re
not familiar
when the concept of higher-order
functions then this is a big big big
chance that this is gonna confuse the
hell out of you encounter kind of
assuming that you’re sort of familiar
with them if you’re not I luckily you
have a video series on that too in the
higher-order functions video and then up
accompanying playlist there as well that
you might want to check out that link is
also in the axial description like all
the links anyway let’s have a look at
this code the thing I want to draw the
thing I want to draw your attention to
is this a way to delay thing here
because I added that because if I don’t
yeah you’ll see like it just becomes we
want the stream to be sort of not crazy
and yes not be too eagerly affection
images so what it does is that every
time you get some page data it waits for
two seconds here before yields an urn so
it makes sense for us to do this but
it’s kind of weird that we do it here
inside of the flicker tag search seems
like we’re mixing in like a
responsibility down in the code where
it’s not supposed to be it would be
nicer if these two were separate things
so what we’re going to do is that we’re
going to create a function that takes an
iterator and it returns a delayed
iterator um all right so let’s see how
we do this
I need a bit smaller texts sorry
mobile users let’s create a new function
that we just call function delay row
boom and it’s going to take an iterator
array or iterate on it the right and
it’s going to take a delay
seconds and because we’re in functional
programming this order is more like the
customary thing to do um okay this is a
bit wrong with its section on it the rug
pull but where we want and we want this
to return a delayed version of the
interval so we’re going to just return
an object and again to do this we want
to do like return an object that has a
property and it’s kind of named with a
symbol that is called as soon it no I
see sorry I think it right tour and this
this is supposed to be a function that
creates the delayed iterator or anyone
that needs it so the first thing that we
want to do is to grab the you know inner
iterator of the iterable that we’re
going to create a delayed personal so
post it the red zone we grab the inner
interval if you remove that we’re going
to transform and that is again going to
have a property called symbol or a synth
iterator and that’s the that’s a
function that creates an iterator force
so we call that and now we’re going to
have the iterator here we’re going to
keep this iterator in this closure and
we’re going to create the new iterable
return the new interval that we delayed
interval actually I’m going to just for
pedagogical purposes I’m going to cost
what next
yes function that it’s supposed to give
us the next item in line and this is
just gonna grab the iterate cold next of
the original iterator trigger up next
but it’s going to delay it so all we’re
gonna do is delay gonna call that with
the delay milliseconds one and then
we’re going to wait for that
and once that delay is over we’re gonna
call it to rate your next and this is
what we’re going to return I need to
actually extract flicker tags the lay
thing out of liquor tag search I’m gonna
copy this but you know delays is not
defined put that here and this one is
not defined I see that this results
after seconds so actually let’s just go
hmm anything this notebook
since function I’m actually gonna you
know fork this otherwise we are in
trouble or in trouble I’m going to go I
would overwrite the code of the last
episode and that would probably confuse
the people watching that episode and
you’re gonna find a link this notebook
in the in the episode description and
you can also just fork it like I did
here to play around with it yourself
like observable it’s amazing either way
back to the code delay seconds this late
milliseconds is no longer true I’m gonna
delay seconds there shift enter to run
that and now it seems to compile let’s
see if this works let’s go to flicker
tag search and throw out the delay parts
of it and I’m going to throw out delay
there
so this cats here we now want to create
a delayed version of that delayed come
on if this works
boom cannot be probably symbol
symbolizing iterator of undefined that’s
peculiar
oh it’s I’m done that’s the problem it’s
I’m creating this I created this
variable to make it even more easily
understandable what wasn’t happening and
then I forgot to actually return it so
it confused us are gonna return the bill
later we’ll see if that gives us some
progress
it did not though it still breaks cannot
read symbol a sync iterator or undefined
so cats is undefined that means a
delayed is returning undefined but it
seems to me like this is distinctly not
undefined how is that possible
oh you know what this error is actually
I’m probably looking at the wrong thing
here because I was believing that this
is the undefined thing but looking at
these it’s probably this one that is
wrong see the interval the delayed
function needs an argument for how many
delayed seconds actually so delayed we
need to go delayed like two seconds see
if this works
Oh solved it I was done but then it was
smart that is truly the experience of
being a software developer this this is
actually just some crap I think I can
remove this I’m on this is no longer
code for using a sync generator it’s
gonna like what what I’m gonna call this
this episode we’re going to call it
higher order it directors in JavaScript
BAM
and I’m gonna publish that so that it’s
available to you fine people so what we
did here today was we extract
this two-second delay that every picture
has out of the flicker tag search and we
created this higher-order iterative
function that function that takes an
iterable and it transforms that and
creates a new iterator that is delayed
or new iterable that is delayed we could
like I think it’s going to be confusing
if I name this episode higher-order
iterables but that’s actually what it is
takes an interval and returns a new
interval that has some properties such
as it being delayed this is very similar
to have how array dot map works on how
array dot filter works it creates takes
an array you call a function on it such
as filter and it create which doesn’t
filter the right so in the same way here
we take an iterator and then we return a
delay in rate here that’s why it’s
called higher-order it’s basically a bit
you could call it like a meta iterator
and the next episode I’m going to
explore this a little bit more and
trying to have some more advanced
examples there’s a lot of things that we
can do here as a safety traders are
built into JavaScript we’re probably
going to see a few big libraries
handling this in the future I don’t know
if that maybe there already are I have
no idea if you know please post a
comment down below speaking of which
that’s it if you have any comments or
questions or confusions and confusions
are likely then please post them down
below and I will try to answer or if you
feel like supporting this show you can
be called patron and that gives you
access to the Fonfon
forum which is a fun and friendly place
where we have discussions with other
programmers I hang out there a lot so if
you feel like doing that that it’s very
welcome it’s a very nice place if you
already are a patron there is a link to
a dedicated topic for this specific
video on the copper forum you can find a
link to that one in the episode
description and if you were thinking
about adding some real-time
communication
collaboration to your app do checkout
pusher our sponsor and say hi you have
just watched an episode of fun fun
function I release these every Monday
morning Oh 800 GMT you can subscribe
here so that you don’t miss it or you
can watch another episode right now by
clicking here
I am mpj until next Monday morning stay curious
Please follow and like us: