Exercises 21-23

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

[00:00:03]
>> Jafar: Now you guys are gonna be learning about a new function called zip. So I'm gonna turn it back over to you to go through the exercises. And we'll learn about, this is the last function that you guys are gonna be learning, and then the rest of this is all drills.

[00:00:14]
It's not hard to learn these functions individually. The hard part is, how do you take a big problem and break it down into combinations of these functions? And that's the real thing that we're gonna be drilling today. So we're gonna break and we're gonna come back to this in say 15 minutes, maybe.

[00:00:29]
What time is it now?
>> Speaker 2: 3:45.
>> Jafar: Yeah, okay. It's 15 minutes, so let's try and go to exercise 24. Every now and then, information isn't just organized into trees, but it's correlated based on its position in an array. Rarely, but every now and then. So I might have an array of videos, as I do in this example, and an array of bookmarks.

[00:00:57]
And the only way to link them up and put them together is positionally. So we see that the first bookmark is correlated to the first video, and the second bookmark is correlated to the second video and on and on and on. Excuse me, second bookmark, second video, and so on and so forth.

[00:01:15]
Sometimes we wanna put those two things together. We wanna collect a little information. It's almost as if we have an array on the left-hand side, an array on the right-hand side, and we wanna kind of merge each item in the array like teeth in a zipper. So the first time I ever read the zip method, I was very confused, and I was very angry.

[00:01:31]
I was like, what the hell does this method do? Why are these academics naming these methods so strangely? And then when I learned what zip does, it actually makes a lot of sense. So I got an array on the left-hand side, an array on the right-hand side, and the only way you can zip up a zipper, right, is if you've got a tooth on both end.

[00:01:46]
Anybody ever break a zipper on a jacket before? Really frustrating, you're like [SOUND], it won't go up. Because a tooth is missing or bent on one side. That's the way zip works. So it will go and slurp up items, one from each side of the array until one of the array stops, and then it won't go any further.

[00:02:03]
So notice here, I very deliberately have four videos and three bookmarks. So what we're going to do in this particular example, is we're gonna loop through. We're gonna use a loop. And we are going to loop only to the length of the shortest array. So notice I'm using math.min here, to say we're only gonna go as long as whichever videos or bookmarks length.

[00:02:26]
And so I'm gonna create an object.
>> Jafar: And I'm just going to grab both the id of the video and the bookmark. So we can go through the videos on the left-hand side here, counter.id.
>> Jafar: And I'm gonna go bookmarkId using the bookmarks in the same. Yeah, thank you.

[00:02:53]
>> Speaker 2: [INAUDIBLE]
>> Jafar: Thank you. Where, here? So bookmark, let's split this up over a few lines here.
>> Jafar: BookmarkId and we've collected up a pair of the videoId and the bookmarkId. And if we run this, we get bookmarks not defined, and that's because it isn't. I have to look it up in bookmarks at counter, great.

[00:03:29]
So that works. So we're just looping through the array, and we just look at that index on both sides, so on the video side and on the bookmark side, we pull out a property.
>> Jafar: Now this is actually common enough, this pattern that it makes sense to abstract it into a function.

[00:03:46]
So we can take this process of a single counter and looking up what that item in the position on one array and that item in the same position in another array, and it's basically gluing them together to create one item. And we can abstract that into a zip function, which we're just gonna add not to an instance of an array but to the array type itself.

[00:04:04]
So you call it like a static function of anybody in the room is familiar with that. You just go array.zip. You don't go an instance of an array 1, 2, 3.zip. And the reason for that is that we wanna make it clear that these two arrays are kind of peers, right.

[00:04:18]
It's not like where you go, they're basically both being processed at the same time. We wanna make it visually clear that that's happening. So I'm gonna take the exact same code. Except instead of this time doing something specific where I'm taking the idea out of the left-hand side and the idea out of the right-hand side, I'm gonna do something generic.

[00:04:33]
I'm gonna use the combiner function passed in to the zip function.
>> Jafar: And I'm going to pass it, the item on the right, or the item on the left, excuse me. So we take left at counter, and the item on the right. And now people can pass in their own combiner function, which decides what to do with the item on the left-hand side and on the right-hand side, and we've generalized this operation now.

[00:04:57]
So when people call zip, they just specialize what zip does by passing in that function that's responsible for combining the item on the left with the item on the right. And so if we run that, we should have zip, great. So now it solved the same problem we just saw with that loop and that counter using zip.

[00:05:16]
So I'm gonna zip the videos, and I'm gonna zip, so that's the array on the left-hand side, and I'm gonna zip bookmarks, the array on the right-hand side. And I'm gonna pass in a collection that takes both a video and a bookmark, and I'm gonna return the videoId and the bookmarkId.

[00:05:37]
I think that's a good deal less code, and I actually find it once you start to learn to recognize these functions, you'll find it much more readable. The thing about a loop, is that look, we're all very comfortable with loops, right? We know how to use those, we've been using loops for years.

[00:05:52]
So at first, it can seem very difficult to learn to use all these different functions. But once you learn these functions and there aren't many, right, we've covered five or six today. What you're gonna find is your code becomes much more self-descriptive. When I look at a loop, I have no idea what that loop is doing, it could be aggregating data, it could be transforming data, it could be filtering data I have no idea.

[00:06:13]
When I look at a map function, I suddenly have a very good idea from a high level about what type of operation is being performed on that collection. And so if you learn to use these functions, right, which are specialized collection operations, your code suddenly becomes much more self-descriptive, much less opaque.

[00:06:29]
You don't have to pay too close attention and read carefully to understand at a high level what's going on. So it's really important to master these functions, and then master being able to combine them together. Cuz not only will it allow you to do very powerful things, which will get you with the async programming stuff, it will make your code much more self-descriptive and readable.

[00:06:45]
And in the end, you end up writing less code, right? The wonderful thing about this is it takes those common operations of looping over a collection and adding stuff to an accumulator, and it makes it somebody else's problem, right? That's what you do whenever you create a function.

[00:06:59]
You make that work somebody else's problem. And so now you can just specialize the little pieces of the operation you need to do. There are so many different ways, it turns out, to process a collection. And a lot of the things that we do that we think are whole new problems are actually just specializations of an overall pattern.

[00:07:14]
Map, filter, reduce, merge, and concatAll and zip. So let's see if this runs. Nice, right, now we're writing some short code. Code's getting real nice and brief.