Higher-order iterators in JavaScript


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 asynchronous iterators. That is what we are going to do today. I am MPJ and you are watching fun fun function. Today’s show is sponsored by Pusher. Pusher makes it painless to add real-time collaboration and communication features to your app. Chat, pub/sub, feeds, you name it, check them out at pushe.funfunfunction.com. That link is also in the episode description Big disclaimer; it’s summer in Sweden. Which is amazing because it’s now bright outside and the birds are chirping. But it’s also very warm and the airconditioning 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 at some point I might die but then again, th, th, th, th, then, it would be weird. Who uploaded the video? Anyway! Higher-order iterators. Let’s have a look where we were last time. Let’s go to this nice channel called funfunfunction 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 scroll down. Click this link here. And I guess steal this API key here [It] will hopefully be expired by the time you view this video 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 [disgust] aww, nasty pigs that have snuck their way in there. Now, lets have a 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 with the concept of higher-order functions Then this is a big big big chance that this is gonna confuse the hell out of you. I’m kind of assuming that you’re sort of familiar with it. If you’re not, I luckily have a video series on that too; in the higher-order functions video and then, An accompanying playlist there as well, that you might want to check out that link is also in the episode 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 [crazy noises] We want the stream to be sort of not crazy and just Not be too eagerly fetching images So what it does is that every time you get some page data It waits for two seconds here before yields an URL 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, iterator, iterator, it-a-ray-tor, And it’s going to take a delay in milliseconds And because we’re in functional programming this order is More like the customary thing to do. Um, okay, this is a bit wrong, where its actually an iterable that we want, and We want this to Return a delayed version of the iterable. 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 async iterable No, sorry, async iterator and this this is supposed to be a function that creates the delayed iterator For 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 version of So, const iterator we grab the inner iterable that we’re going to transform and That is again going to have a property called symbol.asynchIterator And that’s the that’s a function that creates an iterator of course 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 iterable that we Delayed iterable. Actually, I’m going to just for pedagogical purposes. I’m going to, const delayedIterable What next yes Function that it’s supposed to give us the next item in line and this is just gonna grab the Iterate call 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 iterator.next() and This is what we’re going to return. I need to actually extract flickr tags delay thing out of Flickr tag search I’m gonna copy this because, 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 run with that I call this delay seconds 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 delay 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 and yeah I’m going to run that and it’s going to go crazy So this cats here, we now want to create a delayed version of that delayed Come on, if this works boom cannot read property: symbol.asynchIterator of undefined. That’s peculiar. Oh, it’s I’m dumb, 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. We are gonna return the delayed iterable. We’ll see if that gives us some progress it did not though. It still breaks Cannot read symbol.asyncIterator of 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 iterable? 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 dumb, 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 Hang on, this is no longer code for using async generator. It’s gonna like what what I’m gonna call this This episode we’re going to call it higher order iterators 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 extracted this Two-second delay that every picture has out of the flicker tag search and we created this higher-order iterator function a 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 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 iterable and Returns a new iterable 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 returns a filtered array. 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 asynch iterators 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 fun fun 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 is 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 funfunforum 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 0800 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.

25 Comments

Add a Comment

Your email address will not be published. Required fields are marked *