Exercises 13-14

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

[00:00:04]
>> Jafar Husain: Now let's try and implement concatMap, I think it's already up here. But the reason why we're implementing concatMap is that it's such a common pattern to go map, map, map and then follow up with a concatAll, concatAll, etc., and flatten out again. But because you're often doing a map followed by a concatAll, well, why don't we just save ourselves some typing and fuse those into one function called concatMap?

[00:00:26]
And so, as you can see here, it's relatively straightforward, concatMap takes a function. Now the one catch is that it expects that function to return an array. Because we're gonna take some flat array, presumably, and then map over it to apply a function to each item, creating a new array, with the resulting array being a two-dimensional array.

[00:00:44]
So in other words, it has to be two dimensional so that we can apply concatAll to it. So-
>> Speaker 2: [INAUDIBLE]
>> Jafar Husain: Yeah, absolutely. So concatMap takes a projection function that's expected to return an array when given a value, and then it flattens it out. So here we have Spanish, French and English words, right.

[00:01:09]
>> Jafar Husain: 0, 1 and 2, a bunch of words for them. We can take all those and call concatMap, right? And look up the return. In this case any of these methods, excuse me, one of any of these items from Spanish, French, English words, and that'll create a two-dimensional array and will flatten it all out.

[00:01:33]
So it's just a map followed by a concatAll, nothing to it, just a convenience function. So whenever you see concatMap you gotta realize we're using a map, or deepening one level of nesting, and then we're flattening it out again. So it's convenient to do those things at the same time.

[00:01:46]
So let's use concatMap to retrieve the ID title and the 150x200 box URL for every video. So I think we solved this problem earlier with map. Sorry, let me just make sure it's not showing all the answers here and restart the lab.
>> Jafar Husain: Which exercise were we on?

[00:02:16]
>> Speaker 3: 14.
>> Jafar Husain: 14? Thanks very much.
>> Jafar Husain: I think.
>> Jafar Husain: Here we go.
>> Jafar Husain: Okay, so we're on 14. Let's try this out. So our previous solution just used map and concatAll. So we're gonna map over each movieList. And each movieList has a collection of videos, which we'll map over as well.

[00:03:14]
>> Jafar Husain: Each video has a boxart collection. Now, remember, instead of creating the object right now, we've gotta wait and keep mapping until every object we need to create our result is bound to a variable. And so we're gonna map, now, over boxes. Actually, technically we're gonna filter first.

[00:03:30]
We're gonna look for the boxart with a width of 150 and a height of 200. I'm gonna bring that to the next line, cuz I'm gonna follow that up with a map. And I'm gonna map over that, and I'm gonna grab just the URL of that boxart. Well, actually, technically now that I've got boxart bound to a variable, video is bound to a variable, I have everything I need to create my result.

[00:03:57]
So I'm just gonna create the final result, which is ID title.
>> Jafar Husain: Let me pull up the video ID.
>> Jafar Husain: And video title, and the box art, which in this case is actually the URL, right? So this is what the result supposed to look like. So instead of just the boxart, or instead of whole boxart, I'm just gonna pull out the URL property, and I'm gonna finish up the JSON object here.

[00:04:28]
And then finish up my map, and then finish up my other map.
>> Jafar Husain: And now all I'm going to apply concatAll because I wanna flatten out.
>> Jafar Husain: Two levels, I'm gonna apply two concatAlls.
>> Jafar Husain: So I'm gonna see, perfect.
>> Jafar Husain: So that was the solution to the previous example.

[00:05:06]
Now concatMap is really simple. Any place you see a map followed by a concatAll you can replace that. We should line up here.
>> Jafar Husain: Yes, you can replace that with a concatMap, which is just gonna need its function. So now I'm gonna delete one concatAll, I'm gonna go here.

[00:05:31]
So how do I know that this concatAll follows this map? Because of good formatting practice. I can identify it with my eye, right? This is why it's so important that we learn how to format large expressions. It's not that large expressions are too complicated. Just like any regular program, if you got rid of all the tabs in your program it would be totally unreadable, right?

[00:05:53]
It's not that it's too complicated to have loops in your program. It's just that you need tabs to visually guide your eye about what the structure of the program is. And so I'm gonna take map here, replace that with concatMap. And now we have a shorter version of the answer.

[00:06:07]
I still get that same missing argument list, that might have to do with the fact I'm using arrow functions here. I'm not sure, but I'll show the answer and I'll prove to you it's the same answer with the long functions.
>> Jafar Husain: Okay, it's just the same thing with functions written the long way.

[00:06:30]
>> Jafar Husain: I'm gonna slightly change the formatting here so that lines up, but that's the way it's supposed to look.