Press "Enter" to skip to content

map for async iterators in JavaScript


good Monday morning you are watching a
series on iterators in JavaScript in
last week’s video we explored the
concept of higher-order iterators or the
concept of having having an iterator
where we have transformed the contents
into something else sort of how we can
use map and filter on the array to
transform the contents of the array in
last week’s video we created a function
called delayed that just took an
iterable and return a new iterable the
same as robot but where the flow was
delayed by a couple of seconds this is a
concept that we are going to continue
exploring today and today we’re going to
write a map function but for iterables
instead of arrays hmm I am mpj and you
[Music]
well disclaimer is that today I am
extremely tired and extremely warm I’m
so sweaty everything is warm Swedish
summer and I’m like oh but no matter you
cannot always have super energy levels
sometimes you just have to lean into the
problem anyway as you well know by now
this show is sponsored by pusher pusher
takes the pain out of adding real time
collaboration and communication features
to your app shut pub/sub feeds mobile
push you name it check him out ad pusher
dot fun for action.com that link is also
in the episode description alright let’s
do this here we are at the observable
notebook from last week’s video I am
going to fork this so that we don’t
overwrite that one now we have a new
version of the notebook you are after
we’re done here you’re going to find a
link to this notebook in the in the
episode description so that you can play
around with this yourself and before we
get into creating map we are going to
fix a problem that has been disturbing
me for a little while and that is the
fact that this thing is sometimes
flashing you can see it sometimes and
sometimes not like that there there it
flashes like there’s that and that is
because the images are being loaded on
the fly and what I would like it to do
is to preload the image before it it
displays it so that there is some there
isn’t a flash product just I’ll flick
the way we’re going to do it is that we
are going to implement in the same way
we have a delayed function that creates
a delayed version of the the cats the
flicker tag search that we are created
we’re going to create a function that is
called pre-loaded which creates a stream
where all the images are pre-loaded
before they are or yielded we are going
to create a preload image function and
what this does is that it’s going to
take and
an earl and it’s going to make sure that
that the earl of the that image is
preloaded into the browser’s cache and
then it returns a promise that will
resolve to that Earl oh yeah done I
won’t go too much into this code as it’s
not really related to the problem at
hand
it just it preloads an image and puts it
into the browser cache that’s what you
need to know now let’s actually create
the preloaded function function
pre-loaded this function is going to
take an iterable this iterable here it
assumes that to be an iterable of herbs
and those urls are seem to be images and
preloaded is then supposed to return a
new iterable where every image is
guaranteed to be pre-loaded let’s just
do it for a weight const SRC of eat your
bowl if for a weight all confuses you
that is because you have skipped
episodes in this series there’s an
earlier version the series where we talk
about the 408 off keyword you can check
it out there we have their weight
keyword here that means that we need to
make this function a zinc or the awaits
keyword won’t work we could probably
call this urls perhaps or not and then
we could just call each so every time we
get an earl from our a sync iterator
here which is urls we are going to pre
load the image and we’re gonna pretty
yeah I mean we don’t really need to do
any weight here because preload image is
going to return a promise anyway so hmm
I think this is it let’s try it
oh wait the key will keyword yield is
reserved yeah
you can’t just use yield randomly you
actually have to do it inside of a
generator and we add a little star here
to designate that this is a generator
okay cool let’s see if this works
let’s go to Katz’s here and then wrap
this thing into a pre-loaded there we go
yeah did that work no no it didn’t all
right there’s a well-known debugging
technique among senior programmers which
is called like being frustrated and
clicking around oh it seems like it’s
iterating over the URLs all right like
as a string so hmm hmm yeah this is due
to observable being more helpful and we
want it to be or it’s very nice that
it’s that helpful it’s just not good for
the purposes of this of me explaining
things the last function that we did we
did the delayed function here we are
manually creating an async iterator with
code but in our new preloaded thingy we
were using will we’re using a sync
generators to create the async iterator
and observable has some things that it
uses to recognize that something is and
a sync generator and it does some
helpful transformation all that look it
makes us not need this does this for
which means that we’re kind of EE for
each like we are iterating over
something that is already a chore a a
iterated over and that is why we’re
getting these you look here like that is
why it’s the parsing it is strengths all
the time so what I’m gonna do just to
end all of its confusion I’m going to do
it the observable way and I’m going to
delete all this yes the edge unhappiest
the HTML here and I’m just gonna write
cats here hit enter so it’s cats here
and cats here I know it works
is he here I like there is no flashing
snappy switches while you’re at it let’s
actually refactor this delayed function
into a generator as well because the
sync iterators manual creation of them
it has been good to do that for to make
sure that you understand that we’re for
Hera generator is coming from but
generally you want to do these where the
sync generators because the syntax is
going to be so much nicer I’m going to
[Music]
there yeah as you see like this compared
to this a lot shorter all right so let’s
start thinking about map flicker tag
search here there’s not much data to map
because flicker tag search right now is
it’s returning just one type of source
source Earl I and that’s a bit limiting
because flicker produce can be many
different sizes so it would be nice if
the flicker tag search actually didn’t
just return a bunch of URLs it would
just return what it said return objects
that had URLs to representing different
sizes of photos so let’s refactor flick
attack search to do that
[Music]
all right so now it’s returning an
object with a square Earl and a medium
Earl right and then down here we had
like this as make sense it’s true beef
photo photo and now that we have this
that means that everything is broken
preloaded this because that this is
going to now assume like this assumes
that it gets that the iterator has a
bunch of arrows that won’t work it’s
going to be photo photo and no hang on
photos photos each so – we’re going to
preload Europe ok and now it works
however this is a bit oddly pre-loaded
is now aware of how photos look that
means that pre-loaded is its aware of
way more things that we wanted to be
aware of it was so nice when it was just
like operating on an iterable of of URLs
now it’s just aware of photos in like
that the photo square so it would be
nice if we could could stick in a map
function here that could filter out or
like map out just the the URLs so that
pre-loaded can operate on those so we
are going to write a map so remember
that map is like a concept in functional
programming it and it’s a method on the
array I actually have an interesting
episode on map here that you could
check out what we’re gonna do is we’re
going to write map for iterators and
just like they work on a race they are
basically a function that returns a new
array where every every item has been
fed through a map a mapper function and
been transformed and in the same way
this is going to create an iterator
where every item has been fed through a
nature a mapper and transform so it’s a
function that takes takes a mapper and
it takes a an iterable eat the bowl and
you know what we can actually grab the
preloaded pretty loaded function here
and as a basis for this because it’s
very similar so I’m just gonna call this
map and instead of photos we are
iterating over and generically the
rotatable
iterable and for each item in the a
table we are going to I don’t feed it
through a mapper the item row mapper and
yield it so yeah that’s that’s it and
now I can can add this here and this
this is getting a bit bit messy and I
know like this is way too NASA we’re
going to be dealing with that later I
promise I’m gonna show you a cool way of
dealing with that but for each photo
we’re going to extract the photo dot s
preloaded and going to throw out revert
back to just using this sources
and pre-loaded share that does it yeah
cool so now we were back and we are now
using map to feed like transform each
photo into just the square URLs which is
then going into the delayed transform
and then that thing is pre loading each
image this is super messy to read though
even if I start indenting it in clever
ways like like this this it’s still not
like it’s it’s still just hard to follow
and the thing is like this si from an
architectural standpoint this is pretty
nice it’s just like it’s it’s a flow
where we just feed from one function to
another
it’s like structurally it feels like
something that we want to do it’s just
that the the syntax here just makes it
so hard to read and this thing where we
just have these function that feed to
each other it’s very common in
functional programming and so there are
helper functions for this in all
functional libraries so we’re actually
going to pull in a functional
programming language called lambda
lambda is it has a ton of functions and
it’s very easily easy to like fall into
this trap of using Ram defer way too
many things and just procrastinating on
finding or kübra under method but one
very useful Ram the function is pipe and
it solves our exact problem here I’ll
[Music]
all right cool I refactor this using
pipe so as you see here we just call
flick a cat search filthy Kirk a tag
search cats and that’s an iterable and
that is fed into the function that is
created by pipe and pipe is just like
this these are the same functions it’s
just that we have put them in wrapper
functions for now where we just the
iterable is fanned here through the
first one and then like it’s called with
map and then whatever is returned there
it’s it’s it’s goes into here and then
that is ready to delayed and whatever is
returned from from this function here is
going into here and it’s going here so
it’s it’s very it’s a bit reminiscent of
promises and then you know how
everything is fed through through the
next then this is still very verbose and
we’re not gonna simplify it a little bit
I’m just walking you through every step
here interval here when you see that
like this this means that this is a is
this a bit superfluous function we don’t
we can actually just pass preloaded in
immediately this however it’s not
unnecessary we need to actually pass in
the iterable to delayed some some way
like we can’t just do do this or can we
this is where I’m going to show you a
technique called curry so we’re looking
delayed here I can just open delayed and
if we just do this instead delay make
delayed into a function that takes a
number of seconds
played or so delay seconds and then
return this function so we can remove
this argument here because we’ve now
moved it over here
so let’s see but we’re not create the
dysfunction that makes another function
and this is called like this called
carrying or partial application I don’t
know exactly what it’s called but it’s a
technique of building functions up
gradually so that means that this thing
here
sorry go to coma it’s now creating a
function that will create the iterable
so it’s like delayed here is now
creating a function that is very
suitable for passing into pipes like
this and we’re gonna do the same for map
here actually I’m going to make map
kuriboh map equals mapper and we’re
gonna remove that from there because we
have moved mapper over here and I’m
gonna save that or update that which
means that I can now remove this wrapper
here and now we’re good oh sorry let’s
go come on
and now it should work yes so that’s a
lot more readable and the thing we saw
before so the way it works is that this
thing here like the iterable that we’re
creating from flicker tag search that’s
passed into map and then it’s being
delayed and then it’s been preloaded
some people like to name these things so
if i just i created perhaps back extract
urls and letting grab that and i go back
here and i just like that because that
creates like this self-documenting thing
with small functions bit of a matter of
taste and also like a matter of context
I think that this is probably a little
bit overkill because this has so little
complexity it’s pretty pretty clear what
probably leave it just in line to be
honest but it’s something that you can
do one thing that you might have noticed
while we were copying the the pre-loaded
thing is that this is it seemed like
math and pre-loaded was a bit similar
perhaps we can use map to implement
pre-loaded can we do that let’s just
comment that out for a bit and see if we
can do that pre-loaded price we can just
do perhaps we can use do map and then
preload image hahaha
enter and it works I could delete that
so in this case perhaps like this extra
little variable here perhaps that’s a
bit unnecessary perhaps we we could
actually inline that in line that here
and get rid of this extra thing here you
know delayed perhaps we can can we do
this here as well isn’t this kind of
sort of the same thing you can actually
get rid of this here so that we make
sure that we’re using that and this is
it’s not quite the same but let’s try
implementing it with map and see where
we’re going
let’s see delayed map and it’s it’s this
thing we get an island and we have wait
for delay seconds and all if the delay
seconds and then we yield the item wait
wait wait all this needs to be a sink
sink item the keyword yield is research
oh yeah it needs
– no we don’t you need ye all three
distinct the item ranked bro yeah I
think it’s kind of like because it’s
it’s getting confused what where I
waiting I think we need to do this or
maybe not
may all maybe it’s a no no no it’s it’s
or item oh that works so I can can I
remove their parents they don’t need
that I do that good all right okay so
now we’ve replaced this with with map
and this really shows you why map is so
incredibly powerful and functional
programming used code just evaporates
it’s this extra step unnecessary
can we just can we inline this in cats
yeah I suppose we could it’s just not
very like this is a lot of garble it’s
not super readable like this seems
straightforward to me this seems
straightforward me this mmm not so much
I think that keeping this here makes
sense this is pretty clear makes for a
nice flow so this as an extraction makes
sense
I think delayed you get to stay I’m not
gonna in line you and that’s map for a
sink iterators I hope that this broaden
your horizons a little bit I hope it was
interesting and showed you a little bit
what we can how powerful a sink
iterators are and what we can do with
them it’s a lot of functional
programming and there as well showed you
a little bit of pipe a little bit of
carrying techniques if this episode
confused you that is completely normal
it means you’re learning
post a comment down below asking your
questions or wondering
confusion or if you want to support the
show you can become a patron of fun fun
function for your Scala bucks and that
gives you access to the Fun Fun forum
which is a fan friendly and fun place
where you can discuss code and life and
stuff in this episode with me and other
programmers as a link to the topic for
this episode in the in the fan fan forum
the absolute description do check it out
and don’t forget our sponsor pusher
pusher dot fan fan function comlink as
in the episode description oh you have
just watched an episode of fun fun
function I release these every Monday
morning or wait hundred 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: