Exercises 6-11

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

[00:00:03]
>> Jafar Husain: So let's try filtering. Now, I think most of us would be very comfortable taking a collection, filtering the items in that collection, and accumulating only those items in the collection that pass a certain test, into a new collection using a loop. Most of us pretty familiar with doing that using a loop.

[00:00:19]
Let's try it with for each. So I'm gonna for each over all the new releases. And if the video rating is 5, I'm gonna add it to a new collection. And I'm gonna return that. So lets take a quick look at that. For each is gonna get called for every single one of these videos, one at a time.

[00:00:35]
[INAUDIBLE] So for each is gonna invoke the function with each one of these videos, and we are gonna suck out just the ID and title and return that or excuse, me no in this particular example we're just grabbing the video, we're going to grab the whole thing if and only if the rating is 5.

[00:00:55]
[INAUDIBLE] If I run that, it works. Okay? Relatively straightforward, then notice that in both map and filter, their kinda doing the same thing, they're calling for each to go over the array and then based on some condition. They're accumulating up a new array of the objects in the previous array.

[00:01:15]
So I'm gonna implement filter here. It's already implemented. Bear with me, okay. Sorry guys, bear with me. I feel like the answers are already shown here. So I'm just going to hit, restart the lab, so we can run them together.
>> Jafar Husain: So we were on the
>> Jafar Husain: Filter example.

[00:01:50]
So we ran this and now we're gonna implement filter. Hm, still seeing these answers.
>> Jafar Husain: Now notice it's very similar to map. We're gonna for each over ourself, and this context, this is gonna be this. This function is gonna get called first with 1, then with 2, and then with 3, so x is gonna be 1, 2, and then 3, And our job is to apply this time, instead of the projection function which takes a value and then translates into another value, we're going to apply a predicate function.

[00:02:21]
And the whole job of a predicate function is just a test function. It's just gonna return true or false, based on the value that comes in. So the first time we pass this value, it's gonna be one and that's gonna return false because it's not larger than two.

[00:02:31]
And so we don't want to put it in the results array. So we go if predicate function. Item in arrays. So we passed the items in array to the predicate function and if it passes we add it to the results. And so that's how we run filter.
>> Jafar Husain: Great.

[00:02:50]
So now we're gonna solve the same problem we solved before. We're gonna go through the new releases function. We're only going to grab the ID, well it's actually slightly different, we're gonna grab the IDs of all the videos that have a rating of 5. So we're actually gonna chain, map and filter together now to solve a problem.

[00:03:06]
So I've got new releases, all my video objects. Right? And I'm just gonna chain, map and filter together, so I'm gonna run filter. And this is gonna take a video, and if the videos rating is 5, I wanna keep it. Now I want you guys to pay attention to how I'm gonna format my code as we do this.

[00:03:24]
One of the things you guys are gonna be noticing, is that you write these programs, you're gonna start to write very, very long expressions. If you're not careful, that could become not so readable, pretty quick. So, I want you to look at how I format these expressions. So, as soon as I have more than one method that I'm chaining off of a noun, like in this case, new releases.

[00:03:44]
I put each one of them onto their own function and I add a tab to indicate that the previous expression has not yet completed, is that clear? So, now if I'm only interested in getting the ID and title of the video, so after I filter it for only those with a rating of 5, I'm just gonna map it.

[00:04:02]
Because what map does, is it transforms objects. Filter just keeps objects from making it in the new collection, but map will take an object and substitute it for a new transformed version of that object. I need to use parentheses here if I'm using the arrow function because JavaScript can't differentiate.

[00:04:19]
If you've got a JSON object on the right hand side, it can't differentiate between whether you're trying to create a block. Where it starts with a brace and then ends with another brace and you've got multiple lines. Or you're trying to create a JSON object. That's why I'm putting parentheses around this thing.

[00:04:30]
So that's a mighty title.
>> Speaker 2: You just want the [INAUDIBLE]?
>> Jafar Husain: Yep.
>> Speaker 2: And there's a bouncing icon in there.
>> Jafar Husain: You're right.
>> Speaker 2: [INAUDIBLE]
>> Jafar Husain: Yeah, it's making the scrolling a little bit difficult, but I will try here, yeah. Cuz it's in a window within a window, if I scroll the bottom of this it won't let me scroll any further.

[00:04:49]
>> Speaker 2: I see [CROSSTALK]
>> Jafar Husain: Well, now that's an effort.
>> Speaker 2: Do the best we can.
>> Jafar Husain: Okay, so first we filter, that returns a new array and so we can chain the map operation right after that, and we can just grab the ID and title property, so lot of coding here, see if this works.

[00:05:04]
Apparently I'm not supposed to grab the ID and title, I'm actually just suppose to grab the ID, forgot about that. So, we'll shorten this to this. And we're good. Okay? Now, the interesting thing about this is that we can query not just arrays, we can also transform trees, in other words, arrays of arrays.

[00:05:24]
So, in this case, I have a movie list array, each of which contains an object. So this movie list, excuse me, yes movie list. So, if you go to Netflix, you'll notice that there's all these movies lists, you have thrillers, horror movies, action movies, etc, and each one of them contains a list of titles, a list of videos.

[00:05:44]
So, here we have new releases, and that contains a video's array containing many video objects. But we also have a drama list each of which contains a video. So this is a treat. Because we have an array of objects which contain arrays. Right. So we have an array of movie list, action movies, thrillers, each one of them has a videos array inside of it.

[00:06:09]
So what we need to do, is we just want to collect up all the video IDs, all the ID's of the videos in all of the lists, into one nice flat collection. So I'm actually going to do something, and I think most of the pretty familiar with, which is nest a loop, right?

[00:06:23]
I mean to use my foreach loop, and I'm gonna do a nested foreach So.
>> Jafar Husain: We'll start with movie lists.
>> Jafar Husain: So, for each movie list.
>> Jafar Husain: We are going to go through each of the titles. Or was it video, yeah videos.
>> Jafar Husain: And then for each one of those videos, we're gonna add it, the idea of that video to all video IDs in the movie lists.

[00:07:17]
>> Jafar Husain: Formatter didn't like me there. Okay.
>> Jafar Husain: Don't forget the end parentheses after your forEach.
>> Jafar Husain: So it's just like a nested loop right? How you would go over a two dimensional array. So we run this. Problem mistyped that
>> Jafar Husain: Does that make sense? Just like a nested loop, that we would do if we were traversing a two dimensional array, for example.

[00:07:57]
Now the thing is, if we have these two dimensional structures. What we would like, is a method, so that we can do the chaining that we did before to just flatten them for us. So, we don't have to write like this nested foreach loop., so you remember in the slides I showed you the concat all method.

[00:08:11]
And the concatAll is very simple. It takes a multi-dimensional array and decreases the dimensionality by one it flattens it by one level. So here we're gonna add concatAll to the array. So, here's an example of a two dimensional array when concatAll gets called on this two dimensional array.

[00:08:31]
This is going to be the outer array, so this whole thing. Then within there, we are gonna get, so in other words sub array is going to be each one of these, so this function pass to forEach is gonna get called one for each of the sub arrays.

[00:08:50]
>> Jafar Husain: So all I have to do, is for each one of those sub-arrays, call forEach again, and then I get an item inside each one. So that will be this one, this one, and this one for an individual sub-array. And so now all I have to do is add the items.

[00:09:08]
To the result, and at the end return the results array. And I will have created a function that we can use to flatten any two dimensional array. So that's it. Now we can factor out that nested forEach from our code and just put it into one helper function.

[00:09:27]
>> Jafar Husain: So exercise 11, we are going to do our first transformation operation, pure transformation operation using Map and concatALL on a tree. And this is a brilliant important skill to get down. So we have Map and concatALL, and we wanna flatten the movie lists into an array of video id's.

[00:09:46]
So the same problem we saw before but this time with map and concat-all. So I'm gonna start with movie list just like before. And the first thing I'm gonna do is I'm gonna filter or rather I'm gonna map over movie list. And that's going to give me an individual movie list.

[00:10:14]
>> Jafar Husain: Right. So in other words. First, my function will be called with this, one of the movie lists, and next the map function will be called
>> Jafar Husain: So for each one of these movie lists. I want to retrieve just the IDs of the titles inside. So each of the IDs of the videos, so I wanna go through the videos, but I only want to grab the IDs.

[00:10:43]
So now I'm going to nest. Going to put another map expression in here. [NOISE] Oops. So I'm gonna map over all the videos in each movie list. And I'm only gonna return for each one of these videos. I'm only gonna return the ID. [NOISE] Let me ask you a question, how many dimensions is this collection?

[00:11:18]
How many dimensions? Is what I have right now. Two, why is it two. Well for ever one of the movie lists I returned A filtered, or excuse me a transformed array of the videos inside. I would took a look at each one of the video arrays in the movie list and I mapped over it.

[00:11:36]
And we know map returns another array. And so I've got an array of arrays and how do I flatten an array of arrays?
>> Speaker 2: ConcatAll.
>> Jafar Husain: ConcatAll.
>> Jafar Husain: I'm gonna finish that.
>> Jafar Husain: So, let's us typing right?
>> Speaker 2: I was trying to do it the other way doing concatAll first and then-

[00:12:07]
>> Jafar Husain: Interesting. So why not flatten first, right? Why can't we just flatten the, because what we've got is this nested object. Why can't we flatten the nested object first. Sometimes we can do that. The reason we can't do that now is that ConcatAll all only works on an array of arrays.

[00:12:24]
It will not work on an array of objects. Which contain arrays, and that's what this is. It's an array of objects which contain arrays, but by applying map I was able to transform each one of these objects into just the array inside of it with just the Id that is.

[00:12:45]
So that's how we turned it into an array of arrays that we could apply concatAll to and that's a skill you're gonna use again and again and again. You're gonna take a nested object in the nested tree, it might contain objects it might contain arrays, by using map to convert it into an array of arrays you'll be able to apply ConcatAll to it.

[00:13:04]
But let's say movie lists look like this, which is totally possible. Maybe movie lists is just an array of arrays.
>> Jafar Husain: Right? The reason it's not here is that we want to have like the name of the genre list. Like drama and that type of thing. So we want an object with a name property.

[00:13:22]
But if it was like that, then we actually could use ConcatAll right at the top. And then filter it and grab. Excuse me. And then map it. And grab only the video IDs after the fact. So that's why we have to first map to turn it into an array of arrays.

[00:13:34]
And then apply ConcutAll.
>> [SOUND] [INAUDIBLE]