Check out a free preview of the full Asynchronous Programming in JavaScript (with Rx.js Observables) course
The "Exercise 20" 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:
Exercise 20 combines many of the functions implemented in earlier exercises including reduce, filter, and concatMap.
Transcript from the "Exercise 20" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Jafar Husain: So, we want to retrieve the ID title and smallest box art URL for every video. So now let's put it all together map, reduce, concat all. Okay, so I'm going to use concat maps. So for every movielist, let's see if we can do this here.
>> Jafar Husain: Return.
[00:00:29]
>> Jafar Husain: So we're going to go through each movielist, and then for each movielist we're going to go through the videos. I'm going to keep mapping until I get all of the variables I need bound to something.
>> Jafar Husain: And now video has a box art collection and in order to find the smallest one, I'm going to have to use reduce, how do I know that?
[00:00:57]
Because whenever you say smallest or largest you're implying some sort of comparison. And whenever you're doing some sort of comparison, you need to look at two items at the same time. And reduce is the only function that takes two arguments, right? Map doesn't, filter doesn't. Reduce accepts a function that takes two arguments.
[00:01:13]
So I'm going to call reduce here on the box art. So, video.boxarts.reduce and we're going to use cumulative value of current value. And I'm going to look for, does anybody remember what the condition is?
>> Jafar Husain: URL with the, okay, smallest box art. So we just want to find the box art that's the smallest, and it'll be very similar to the code we wrote earlier.
[00:01:55]
>> Jafar Husain: So if the accumulated value is smaller, we return it. If the current value is smaller, we return that.
>> Jafar Husain: Got an extra return statement, here. Now this subexpression right here is going to return an array of one. An array of one box art. That's what reduce does, right?
[00:02:16]
Give us an array of one item. And now, if I recall correctly, it's my job to return.
>> Jafar Husain: False box art. I'm not sure if I'm supposed to return the, the URL, great. So I'm supposed to return the video ID and title and the URL. So I'm actually going to bring reduce down to the next level.
[00:02:44]
Because as soon as I have more than one function that I execute, I bring each one to its own line so that I can see which ones are lined up against which object. So, I'm going to take a box art and now notice I have a variable bound to the video.
[00:02:59]
I have a variable bound to the box art and I'm ready to create my result.
>> Jafar Husain: And we're going to pull out the URL of the box art.
>> Jafar Husain: So I think Firefox has some sort of problem with this code, but we'll see if it works anyways. And I end my map, my concatMap, there's a problem here which is that I wanna use concatMap here.
[00:03:44]
So very often you'll see concatMap, concatMap, concatMap, map. Which mirrors the fact that normally it's map, concatAll, map concatAll, map, right? In the end, you don't need three concatAlls for a three dimensional collection. You need two concatAlls for a three dimensional collection, right? Because that's when you flatten it out by one dimension each time.
[00:04:02]
So this should work and if it doesn't, we'll just show the answer because it's the right answer. Great. So you keep mapping until you've got a variable bound to everything you need to create your result. And then you figure out how deep you are, and apply the right number of concatAlls.
[00:04:19]
Or translate the right number of maps into concatMaps, same thing.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops