This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "_.map()" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Bianca Gandolfo: So, another one that we use a lot is map. And map and each have a lot in common. The important thing to note about each is that you can't return anything from each. So if we see here we're pushing to our farm, but we're not using a return statement.
[00:00:21] You cannot use a return statement in this function. It won't work. So just keep that in mind. However, in map, it's really important what you return. So map does the same thing where it's gonna loop through an object or an array and it's going to apply it to a function.
[00:00:41] The difference here is what we return. So if we return here, you return some value here. That's gonna be placed into an array. And so we have to save this in a variable until nums would then be again just an array of numbers. So it would return that.
[00:01:08] So whatever is returned from the callback is going to be put into an array. So we can return like nums, the valley + 1. I output two, three, four. So then you can transform your data this way.
>> Bianca Gandolfo: So it produces a new array of values by mapping each value in the list and transforming it using this function.
[00:01:41] And the same holds true with the parameters. They're always gonna be the value, the index, and the entire list.
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: So back to our pocketmon example. We have an array of pocketmons and then we have a function called excited array and this is my algorithm that takes any string and suddenly makes it an excited string.
[00:02:15] So, how do we use this, using map? So, of course, we'd say underscore dot map and what do we pass it? How about Tanner?
>> Tanner: We pass it a 123 in the brackets. No, I'm sorry.
>> Bianca Gandolfo: Yeah, you're one slide behind.
>> Tanner: We pass it the function pocketmon.
[00:02:40]
>> Bianca Gandolfo: Yeah. So we pass it pocketmon, which is an array. Of our pocketmons. So it'd be pocketmons or pocketmon? What do you think?
>> Tanner: Pocketmon.
>> Bianca Gandolfo: Pocketmon, for plural. So it's like sheep sheep. Okay.
>> Tanner: Or deer.
>> Bianca Gandolfo: Or deer, yeah. Cool. And then what do we pass?
[00:03:06]
>> Bianca Gandolfo: So. What about William, you've been quiet.
>> William: Gotta set the callback function, you wanna call for each one of them. So I think it's excitedArr.
>> Bianca Gandolfo: Yep. There is no other functions on page and so we just pass excitedArr notice we're not calling it here we're simply passing it that's important.
[00:03:33] Cool.
>> Speaker 3: How do we know that its gonna use the value cuz when you're defining excitedArr that she's using val?
>> Bianca Gandolfo: Yeah, so that's just a parameter. We can call this like str too.
>> Speaker 3: I know, but maybe I
>> Bianca Gandolfo: It's just the mechanics, how it works. Is that the first things it calls the function with, whatever function it is?
[00:04:04] Whether or not it has parameters or not it's gonna call excitedArr like this. So if we're doing this example it would be pocketmon at the first one would be zero. Yeah, it would be zero and then zero and then it would be just pocketmon. So, that's what it's doing under the hood, it's calling it like that every time and then the second time it calls it like this, right?
[00:04:42] And then the third and the final time it will call it like that.
>> Speaker 3: So and because pocket mon square bracket zero is the first value, that get's substituted for STR and the rest just doesn't get
>> Bianca Gandolfo: Exactly.
>> Speaker 3: This is discarded?
>> Bianca Gandolfo: Totally. So first argument is gonna amount to the first parameter and since STR, first parameter, STR is now pocket mon at zero which is char source.
[00:05:16]
>> Speaker 5: Questions, is passing the function in the underscore map parameter the same as calling it.
>> Bianca Gandolfo: So is it the same as calling it? When you pass it to map, we aren't calling it. But map calls it for you. So yes and no. If you don't want this function to be called, then you shouldn't be passing it to map cuz map will just, under the hood it calls the function for you.
[00:05:47] Really similar to in our callback exercises where we took a function and we called it immediately.
>> Speaker 3: So isn't that one that you have highlighted, that's just a reference, so it's telling map this is where that function is. Is not actually doing the function. But then when map does its internal things.
[00:06:05]
>> Bianca Gandolfo: Right.
>> Speaker 3: It's going to that address and saying, there's a function..
>> Bianca Gandolfo: Exactly, so map is its own function. So we're calling map. And somewhere in underscore library we're entering into the function body of map, right? And we have two arguments that we're giving to map. And map has some functionality that it does always with these two arguments.
[00:06:27] So inside the function body it's gonna loop through this list and it's going to call this function with each value of the list. So as it loops, it's gonna call it. And that's how It works under the hood, and we can even look at it, if we wanted to, map.
[00:06:43] So we see it takes an object and it takes an iterator, and if we look somewhere in here, we see that it's calling the iterator function so it's looping first of all, right. See that loop? And it's calling, it's doing a little bit more than what I'm expressing.
[00:07:06] But the main point is that it's looping, right. And then it's calling that iterator function with the value with the property. And with the entire object. Right. So that's what map is doing under the hood. Cool. Any questions on that? And the key thing here is we want to say this save this in a variable because it's returning an array.
[00:07:41] So var excitedPocketmon equals this. So now we have transformed our array into an excited array.
>> Speaker 3: Could you have saved it in your same pocket lan one to over write and that should be okay?
>> Bianca Gandolfo: Mm-hm. Yep.