Check out a free preview of the full Asynchronous Programming in JavaScript (with Rx.js Observables) course

The "Exercise 24" Lesson is part of the full, Asynchronous Programming in JavaScript (with Rx.js Observables) course featured in this preview video. Here's what you'd learn in this lesson:

In exercise 24, you will retrieve each video’s id, title, middle interesting moment time, and smallest box art. This will require using most of the function created throughout all the exercises.

Preview
Close

Transcript from the "Exercise 24" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jafar Husain: So now actually I think this function is gonna, this test, this problem is gonna pull all of the functions we've learned today together I believe. We're gonna return the video ID, title, the middle interesting moment that's kind of an interesting life so every video has a list in Netflix.

[00:00:17]
Every video has a list of interesting moments where you might wanna, we might wanna display that screenshot when you're just browsing through the videos. And we might say, that's interesting moment you know and die hard where he's falling off the building or something like that, right? We pick interesting moment and so everybody has an array of these interesting moments.

[00:00:33]
So if we look at the type here, so here's one single video, we see that it's got ID, title and boxarts. It's also about URL rating but it also has another array on it, interestingMoment. So we wanna pick out the middle interesting moment. The one in in the middle of the movie right would pick out one of the beginning, one of the middlemen of the end and we also wanna pick the smallest box art.

[00:00:54]
That's how we're gonna put all this together? How many people finish this question by the way? It's all right and we judging it, it's a hard one, not quite okay. Let's take a look and see if we can solve it together. So we're gonna start out with concatMap and movieList.

[00:01:08]
I'm gonna shorten this to the use the new era function. So for every movieList, we're going to, and I'm gonna start off by mapping over the movieList here. We're gonna get out a video, excuse me, we're gonna get out a video and now we've got a video, that's great.

[00:01:32]
So we've got this thing that's got an array of interesting moments and an array of bookmarks. So, I guess I could do this, I could start grabbing the bookmarks. Let's buy ourselves a little room here by making this a block function and then we can put multiple lines in.

[00:01:49]
So, what if I collect up the bookmarks or the middle interesting moment, let's start with that one. So, as you're trying to choose you've only got five functions. So, there's not that many possibilities whenever you're trying to solve a problem or sub problem like this, you have to ask yourself what's the right function to use.

[00:02:07]
Anybody want to take a guess, you're going to take these big problems and break them up they might seem big but you can break them up into small problems. Anybody want to take a guess as to what function I can use to pull the middle interestingMoment out of this little array on the video?

[00:02:22]
What function should I use?
>> Male Speaker 1: Filter.
>> Jafar Husain: Filter, right? Because I've got a bunch of stuff I'm only interested in one so I'm gonna use the filter, so let's try that.
>> Jafar Husain: Done-zo! So that's one piece of the sub problem solved, what about let's tackle the the box arts.

[00:02:58]
So this is not this tiny piece of the sub problem, we already know how to solve this right. What's the operator we're gonna use to get the smallest operative word being smallest box art from a collection of box art.
>> Female Speaker 1: Produce.
>> Jafar Husain: Produce, because in order to see if something is smaller than something else, we need to look at two values at the same time.

[00:03:18]
And reduce and zip are the only operators that accept a function which has two arguments, so we're gonna have to use reduce.
>> Jafar Husain: So, I have the smallestBoxArt so far, and the current box art and we're going to use that familiar pattern we've been using so.
>> Jafar Husain: So if the current one is smaller, if the smallest one so far is smaller than the current,

[00:04:28]
>> Jafar Husain: We'll return the smallest, otherwise we will return the current, and that's all there is for reduce. So now we've got a middle interestingMoment, and we've got the smallestBoxArt, right? Now both of these, I want to pull I want to point out that both of these, what's the type of middleInterestingMoment at this moment.

[00:04:48]
Can anybody tell me what that is? The type of middleInterestingMoment.
>> Female Speaker 1: It's an array.
>> Jafar Husain: It's an array, an array containing how many items?
>> Male Speaker 3: One, probably.
>> Jafar Husain: Over here I hear one, two.
>> Male Speaker 1: One.
>> Jafar Husain: One, yeah and smallestBoxArt is an array right because that's what reduce returns in array.

[00:05:11]
How many items does it contain?
>> Male Speaker 4: One.
>> Jafar Husain: One, so we actually have two arrays that or both length one and what we want to do and this is the challenging part. We know that we need to have middle interesting moment in smallest box are in scope to return our value and we need to have them in scope, right?

[00:05:29]
The problem is, we can't use the index here zero to pull them both out right? It's almost like we need both of them in scope at the same time. So there's two ways we can do this. One is we can go on all right.
>> Jafar Husain: And now we've got them both in scope at the same time, that's one way to do it so.

[00:06:08]
>> Jafar Husain: And now we actually have everything in scope video, moment, the smallest box art to create our result. But that's a little bit weird because I mean I could equally switch this around. I could do smallest box art and then middle interesting moment. Usually we use map when you need to do some operation before some other operation.

[00:06:39]
Now we need to map over all of the movie lists before we can map over their titles because we need to do that. The one comes before the other in the tree. We need to first you know if you are using a loop you would first need to loop over all the movie lists.

[00:06:52]
And then within each movie list loop over all the titles. So there's an order dependency there, we have to do one before the other. But here, we actually just have both of these in memory at the same time. We don't need to go inside of the middle interesting moments to get up the smallest art, it's like we did with video lists and videos.

[00:07:08]
So what we need is a function that will bring both these values in scope at the exact same time. But doesn't make one dependent on the other or anything like that and map zip excuse me, is perfect for that. With our zipping up a zipper with only one tooth on each end like a zipper of one tooth.

[00:07:43]
>> Jafar Husain: And now in here, I have all the information I need. So even though the map example would have worked it's sub optimal. It doesn't, it means arbitrary if you pick one or the other. This is actually more efficient as well because we only do one loop.
>> Jafar Husain: So now I've got a variable bound to be interesting moment the smallest interest or the middle interesting moment a variable bound to the box are a variable bound to the video.

[00:08:16]
And I'm ready to create my result which I believe is,
>> Jafar Husain: Was just interesting that was at the, what do I have to grab here? Middle interesting moment time I need to get the time and the URL of the box art. And I believe we have everything we need, I wonder if that will run.

[00:09:00]
It's like I have a syntax error somewhere. But rather than spend a lot of time figuring out where that is I'll actually I wanna be careful here cuz we're not quite done. So notice I've got contactMap and I've got map and then within this, I forgotten to return.

[00:09:19]
So within this, I've got another array, so we've actually got at least a three dimensional collection here. Because inside of this map instead of reduce here, or excuse me, inside of this map I'm returning another array, right? And so we've gotta concatMap, a map and then inside of here, we're returning yet another array.

[00:09:42]
So we've got a three dimensional collection, so we need two flattens. So I'm gonna change this map into a concatMap and now we should flatten the whole thing out but I'm probably still missing that. I'll just show the answer.
>> Jafar Husain: So in this example actually in line rather than this first assigning the middle interesting moment to a variable.

[00:10:16]
This is getting the non interesting moment or see me this is getting the smallest box art. And then grabbing the middle interesting assigning them both the variables I just in lined them directly inside of the call to zip.
>> Male Speaker 1: There's a question about what is it we won the morning to reduce its cool.

[00:10:36]
>> Jafar Husain: You want to keep warm doing?
>> Male Speaker 1: What if you didn't want to?
>> Male Speaker 3: Like, the asynchronous is three or four items that you need, instead of just two.
>> Jafar Husain: Well, so you can always use map to do that, right? But the point is, let's say I have got two different async APIs, and I can call them at the same time.

[00:10:54]
Then, zip is more appropriate, because I don't have to call one in order to call the other. Right, it's when you have to call one in order to get the other that you would want to call map. Cuz you map over the first, and somehow using the data that comes out of that, you acquire the ability to call the second, that's where you need map or you have an order dependency.

[00:11:12]
Just like I have to map over the video lists before I can map over each video inside, that's when map's appropriate. But I think they, they're actually what the question was getting at is what if you need 15-
>> Male Speaker 5: Yeah.
>> Jafar Husain: Or 12? So the zip we've defined here works out only two just to keep the implementation simple, the zip that you're going to use in our X and when you can run right over as well just accept end.

[00:11:32]
So you can specify as many arrays you want and then the final function just accept that many number of arguments, to combine, so good question.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now