Exercises 1-5

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

[00:00:03]
>> Jafar Husain: Open your browser. If you have Firefox, I recommend you use Firefox for this. But if you have Chrome or IE, it'll work just fine. The only reason to use Firefox is to use the arrow function, which I showed you earlier. Which, this would be a really good time to learn the arrow function.

[00:00:19]
It's going to save you a lot of typing. Yeah?
>> Speaker 2: There was a question on the last one. What happens when a user will click multiple times on the play button?
>> Jafar Husain: Good question. Well, so yeah, implicitly here. The code is assuming that if you click play multiple times, it will trigger a cancel event that makes sense.

[00:00:42]
So you're never going to get play, play, play, cancel, cancel, cancel, you always get play cancel play play cancel play. That's not visible in the code here, but that's effectively how it works. So it's, if you press play again on a different title, it's implicit cancel, and so that cancel stream doesn't just have back buttons, but it also has further newer play play events.

[00:01:04]
>> Jafar Husain: So, let's load up the learning exercises here. Have we all got this up?
>> Jafar Husain: So, the way this works is we've got exercises, and you go down here, you run them, and no news is good news. If it runs and nothing happens, you can scroll down and go to the next exercise.

[00:01:30]
So, the first few exercises are filled out for you. So, in this particular exercise, we're just solving stuff using loops, so what we're doing is as we fill these exercises, at first, we're gonna have you solve a problem using the familiar loop approach, and then we're gonna have you solve that same problem using one of the five functions for each, the few functions for each map, produce, filter, and zip.

[00:01:51]
So, we're going to teach you a new function. How do you solve a problem with a loop? And then how do you solve the same problem with a new function? So here, we're using what we shouldn't be using and what we can't use for Async functions, which is four.

[00:02:01]
All right, so we've got a for loop. We're just looping through a bunch of names. We're putting them out. Okay, can everybody see that?
>> Jafar Husain: So if I run this, nothing happened. But if I scroll down, I'll see that the next exercise has been revealed. So, that first exercise is already filled out for us.

[00:02:22]
So we scroll down to find that the for loop has now been replaced with the arrays for each method. So, it's the same exercise as before, except this time we are using for each instead of the for loop. So if I run this, it works. I know that because the next exercise beneath has been revealed.

[00:02:44]
So, I want to go through the first exercise, well, technically the third exercise with you guys, right? It's called projecting arrays. So, projection is just a fancy word for what map does, it takes an array of items and takes each item and creates a new item and then puts all the new items into a new collection.

[00:03:00]
That's sometimes projecting, and the reason why, it's taking light and transforming it, that's where that idea of projection comes from, right? That's kind of what map does, right? As items come through, it transforms them, right? And so, you get a new collection with each item transformed because it ran through the function.

[00:03:25]
So, that's why we call it projecting. But now we have an array of Netflix new releases, for example, we're gonna have a bunch of these new releases, and what I'd like to get out, I don't care about all these properties. All I want to get out is the IV and title.

[00:03:39]
So, what I can do is I can loop over them using for each, right? So technically, the for each method, not a loop. So here, it sees insert code. Sorry, I think so, yeah. Is that good enough? May work. Okay, so we've got this video in title pairs, and the goal here is to accumulate up just the idea and title from all these videos and put them inside of video and title pairs.

[00:04:17]
So, I'm gonna go new releases.
>> Jafar Husain: I'm going to create a little JSON object, which has just the video ID and just the title. So, all we're doing is we're going over each of these objects and pulling out just the ID and title, and putting that into a new array, and that is what we are returning.

[00:04:58]
Video and title pairs, empty array, for each over the new releases function, add just the ID and title of each video to the collection, and then that's what we return. So, let's give this a try. Let's try and call return, run, rather. And it worked. We know it worked because stuff was revealed beneath.

[00:05:27]
So now that we've done this operation, you probably recognize that this is exactly what map does. Map goes through a collection, applies some transformation to each item in the collection, not actually changing it, but creating a new item, and then accumulating up those new items into an array.

[00:05:41]
So, instead of just using map, we are actually going to implement map. We're going to write map ourselves. So, every single function you guys use today, you're going to write yourself to make sure that you actually know how it works. So, map already exists on array, but we're gonna replace it, we're going to overwrite it.

[00:05:56]
And notice that what we do, we've taken the common bit of this, the pattern. First, we create an array to accumulate up the results, and then we for each over this. Now, in this context, we're adding map to the arrays prototype, which means we're adding map to the array type.

[00:06:10]
And so this, in this context, actually means the array that we're mapping over. And so, since for each exists an array, we can for each over it. And now all we have to do is take the projection function, this is the function that we want to apply to every item in the array, and apply it to the item in the array.

[00:06:30]
>> Jafar Husain: Now, we're not done, because we have to take the result that we transmit, and we need to add it to the new collection. And that's how map works. That's all there is to it. It's a method on array, which accepts a function to apply to every single item in a collection.

[00:06:48]
It takes the results of calling that function all those times we've put some into new array, and then returns that. That's the definition of that. Five lines of code. So, let's see if this works and run it. And it does. So, what I'm gonna do from this point on is we're gonna turn these exercises over to you.

[00:07:08]
It's really important that you guys actually do these yourself. And not just watch me do them, right? And I'm going to do them at the end of every section, for example, right? For the videos purposes, but I really want you guys to try and do them yourself. Because you're not going to learn this, unless you really start to build those new neural pathways by putting yourself at a loss by trying something very, very differently.

[00:07:29]
So, we're gonna start from this point on, is anybody having any problems getting to this point? Have you filled out the map definition?
>> Jafar Husain: I'm going to teach you a coping skill, coding inside of text boxes and web pages is not always convenient, right? One is you can copy into your favorite text editor and you can finish it out there and paste it in.

[00:07:51]
That's one approach you can do, but if you're having some trouble and you're try to figure out why something doesn't work, you can always take advantage of your browsers built in debugger tool. So, let's go back to this particular example. Let's say I don't know why something isn't working.

[00:08:03]
I can always use this approach, who's familiar with this directive? Right, debugger? If you throw debugger semi-colon into any arbitrary piece of code, and then in Chrome or in Firefox open up your developer tools.
>> Jafar Husain: And then run that code.
>> Jafar Husain: You will see the code right here, and it will break at that particular statement where you've written debugger.

[00:08:28]
This is an invaluable tool to allow you to figure out what's going wrong with your program. Cuz I can tell you, the error messages here are not that great. That's on me. But that's why, that's definitely something you want to do. So, you can step now, I can step through and figure out why doesn't this thing look like what it's supposed to look like?

[00:08:46]
So, just open your developer tools, whether you're using Firefox or Chrome, I will also demonstrate why I told you guys to use Firefox. If you had Firefox, because the latest version of Firefox is great because you can use the aero functions that I showed off before. I'm not 100% sure if you can use the with aero functions with Chrome, I don't think so.

[00:09:13]
Is that a note right here?
>> Speaker 2: Canary.
>> Jafar Husain: If you have the canary version of Chrome, you probably can. I'm going to fill up, notice here. I'm giving away the exit, this solution exercise five here. But notice I'm using that arrow instead of writing out function. That can be tremendous.

[00:09:32]
Let me make that bigger, too.
>> Jafar Husain: It's very, very nice to be able to use the aero functions. So, if you can use them, I would highly recommend using the floppy exercises. So, you can get Chrome canary if you like Chrome, or you can use Firefox to do it one way or the other.

[00:09:54]
I think we left off on exercise three, which is projecting an array of videos into an array of id and title pairs. Now, remember, again, when we talk about projection, we're talking about the map function. We're talking about applying a function to every item in a collection, transforming it into a new item, and then putting all those new items in a new collection.

[00:10:10]
So, the goal here is to use for each, so for each over new releases, and then accumulate up just the ID and title of each video into this video entitled pairs array, and that's what we've done here. So, I'll run it. It works. We'll move on. Now, implementing map is straightforward.

[00:10:33]
All map does is we're adding a map method to an array, all it's going to do is it is going to for each over, this, which in this context is the array itself, because we're adding the map to the array object. And then for every single one of these items, so let's look, actually, let's look down here at the example, I find this instructive.

[00:10:49]
So, let's take a look at this example execution of map. So here. This is going to be this object, right? It's going to be the array of one, two, three, and projection function is going to be this function right here. So, all we're going to do is we're going to for each over our self, so, first item in array is going to be one.

[00:11:10]
>> Speaker 2: [INAUDIBLE]?
>> Jafar Husain: Yeah. So, first item in array is gonna be one, then item array is gonna be two, and then item in array gonna be three. So, all we have to do is apply the projection function to the item in the array, and that will run this function right here with X.

[00:11:30]
Substitute it as one the first time. X is two the second time. And X is three the third time, and take whatever comes out as the result and add it to the results array. And then finally, return the results array, and that's how we get two, three, four.

[00:11:46]
So, that's how map works. So, let's solve the same problem we solved before. We wanna get the ID in title, from every single video in the new releases, except this time we're going to use map instead of for each. Well, okay, so it's there already. But that's effectively how we do it.

[00:12:03]
We take the map function, we pass in a function which accepts the video, and then simply returns a JSON object containing only the ID and title, and we're done. So, as you can see already, there's a lot less boilerplate with map and using for each and accumulating up objects, right?

[00:12:22]
So, we're going to run that, great, works.