This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "_.each()" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So the first one that I wanna talk about is each. This is one of the most common underscore methods that is used. And it's not only used in functional programming. In fact, a lot of people use this. I wanna argue that most people use each, either in underscores each, jQuery has its own version of each, and then there's a native for each, as well, that comes with JavaScript.
[00:00:31] So what each does, is that it takes a list, it could be an object, or an array, and for every element. In that array it calls the callback function here. So now you guys can see what I was talking about with the value, the index, and the list from the exercises.
[00:00:51] It's because that's how each works. So in this example, this function, here it's going to be called three times. The first time it's going to be called with one as the value, and then zero, and the whole array. The second time, the val is going to be two.
[00:01:11] And the index is going to be what. What's the index going to be?
>> Speaker 2: One.
>> Bianca Gandolfo: One. And then the whole list, right? That array. And then the last time, the val is going to be three, i is going to be two, and then again, list is going to be the whole list.
[00:01:28] And we know from our prior discussions that we don't have to work with all the parameters, right? So in this signature here, this function signature. Those are just parameter names. We don't have to reference all of those. So if we just wanted to console that log to val, that's fine.
[00:01:45] But if we wanna do all of them, we could also do that too. And we also know that we could call this whatever we want. Sometimes it's called element. You can like spell it all out index. I don't know. You can call whatever you want. And so, as long as they match in the function body, that's what's important.
[00:02:09] So, in, as far as the order of element index in the whole list that order doesn't change. So it's always gonna be the value, it's always gonna be the index, and then it's always gonna be the list, in that order. That's the order of the parameters. So whatever you call it, call those parameters, it's still gonna be passed in that order.
[00:02:31] So for example, let me just go back the way. It won't let me. We had it like this before val, i, and list, right. If we swapped val and i like that, i would then be val. You can't mix these up. Or you can name them whatever you want, but it's not gonna affect the value that it holds.
[00:03:01] So this first one is always gonna be the value, and the second one is always gonna be the index, cool?
>> Speaker 3: And just to quickly kinda, instead of having a function that loops through a collection.
>> Bianca Gandolfo: Mm-hm, mm-hm, yeah. And so, this is awesome because you don't have to write out the loop the whole time.
[00:03:21] It's more obvious what it's doing where your attention and loop syntax is drawn to the mechanics of the loop. Where does it start, up until when etc. And then also each will work with both arrays and objects so you don't have to worry about the for end loop versus the for loop with the semicolons and then or the length, or like having to do high zone property.
[00:03:46] And those kind of things, you don't have to worry about that with each. And it kinda just takes care of it for you, which is great. However the native for each, in JavaScript is only for arrays. So keep that in mind. But each in underscore can do both.
[00:04:04] Oops, my email's open.
>> Bianca Gandolfo: Yeah, so awesome. So let's look at a little more. So we're gonna use each with this array say my pocketmon array with the Charisaur, Bulbazard and Twomew. And we have this function logger. All logger does is it takes a value and it console.logs that value.
[00:04:32] So, how are we going to use each?
>> Bianca Gandolfo: To log all the values of our pocketmon.
>> Bianca Gandolfo: So we start with each like this. Let's see, William? Do you know?
>> William: Pocketmon.
>> Bianca Gandolfo: Mm-hm. Pocketmon, yep. And then the second one?
>> Bianca Gandolfo: Do you know Grace?
>> Grace: Logger.
>> Bianca Gandolfo: Logger, yeah.
[00:05:19] Yeah, so iterator is just a fancy word for the function that's gonna be called every time in the loop. So yeah, and that's basically how you use each as we pass it array and then each time the loop is called. It's going to call this logger function with first it's going to say Charisaur, then it's gonna be Bulbazard, and then it's gonna be Twomew.
[00:05:47] So that's the order.
>> Bianca Gandolfo: Cool. I wanted to introduce, remember AnimalMaker from yesterday? We have this AnimalMaker constructor function that creates are animals. We had some animal names, can someone give me some animal names?
>> Speaker 6: Smokey.
>> Bianca Gandolfo: Smokey.
>> Speaker 7: Fluffy.
>> Bianca Gandolfo: Fluffy.
>> Speaker 7: Trigger.
>> Bianca Gandolfo: Trigger, okay. So what we want to do here is, the same as yesterday, is we want to loop through all the animal names.
[00:06:31] Create an animal object that has the speak method on it and then add them to our farm. And so this is how we did it with just a regular loop. We did a foreloop, we started at zero, we looped while i is less than m on Names.length. And then we set i++.
[00:06:51] Right, we incremented i each time by one, and then we are running each animal name, so Smokey, Fluffy, Trigger, one at a time, into our AnimalMaker function. So we see here that we're calling a function the animalName at i. And then we're pushing that whole thing Into our farm.
[00:07:17]
>> Bianca Gandolfo: And so, my challenge to you is to take a couple minutes and rewrite this using each.
>> Bianca Gandolfo: Anyone know what the first argument we should pass to each should be?
>> Speaker 7: Animal names?
>> Bianca Gandolfo: Mm-hm. [LAUGH] And the second one's gonna be a function, right?
>> Bianca Gandolfo: Lets move this up, so we have more space.
[00:07:58] So, what are we going to put inside the function?
>> Speaker 8: Push.
>> Bianca Gandolfo: So farm dot push? What are we gonna push? Andy do you know we're gonna push?
>> Andy: I think we're gonna push name.
>> Bianca Gandolfo: Close. We do need to use the name. We need to make sure that we don't forget to pass it through our constructor function, AnimalMaker.
[00:08:33] What about Kim, do you have an idea of what we should add to this line?
>> Kim: [INAUDIBLE]
>> Bianca Gandolfo: Like that? Yeah. Cool. And so now we can just delete this. Well, actually lets take a moment and sort of compare how these look. Right? You remember how I was saying that for our for loop the attention is drawn more to the mechanics of the loop, rather than what it's actually doing.
[00:09:11] You can see this pretty clearly here. The mechanics of the loop actually takes a lot of typing. And that's not the important part. And there's also leaves a lot of room for human error like off by one or you put a comma, instead of semicolon where you're suppose to.
[00:09:28] So with each, it really simplifies that where you only have to pay attention to the data, and then the function in which you want to run, and the functionality.
>> Speaker 11: So that, can we underscore each part, where it says function parenthesis name? That's referring to each of the objects in the animal names, or?
[00:09:50]
>> Bianca Gandolfo: Here?
>> Speaker 11: Just the placeholder.
>> Bianca Gandolfo: Here?
>> Speaker 11: Yeah, so that name.
>> Bianca Gandolfo: That's a placeholder.
>> Speaker 11: This is a placeholder that represents each of the iterations.
>> Bianca Gandolfo: Yeah.
>> Speaker 11: Of animal names.
>> Bianca Gandolfo: Exactly, so it's val.
>> Speaker 11: And then you have to put val down there.
>> Bianca Gandolfo: Right exactly.
[00:10:07]
>> Speaker 11: It's got to be the same.
>> Bianca Gandolfo: Yeah, and the cool thing about this is that we can say name, right? It's just more clear versus animalNames[i].
>> Speaker 11: Yeah.
>> Bianca Gandolfo: It's less clear what that means. If we just say we call this name, then it's clear to me so we're making an animal, we're passing in an and then we're adding it to the farm.
[00:10:27] So it's just more clear in what you're doing, and you're able to do that naming here versus when we have a regular loop where we have to do all this bracket i stuff.
>> Speaker 11: So the argument in the callback function refers to the index in the Do you list?
[00:10:47] List?
>> Bianca Gandolfo: Yeah, so, the parameter is gonna be, the first one's gonna be Smokey. And you can also put the index here. Then you can also put the whole list, but since we're not really using it, we don't need to do that. But you could.
>> Speaker 11: So every time it loops, that name will go Smokey, Fluffy, Trigger?
[00:11:07]
>> Bianca Gandolfo: Yes. Yep.
>> Speaker 12: What if animal names, that array, instead of just having a string n each area or each spot, what if it was an object with, you know what I'm saying? What if it was a more complex object, how would each know what to pick out of there.
[00:11:30]
>> Bianca Gandolfo: Yeah, so, there's a few ways you can deal with that. You can call this, then this would be animal. You can call it animalObj, in case you forget that it's an object. And then you can actually just nest. Nest your each like this. And this would loop through your animal object.
[00:11:52] And then, in this function, you can do whatever you wanted to do with it.
>> Bianca Gandolfo: So this would be like.
>> Bianca Gandolfo: So then you could nest your each statement like that.
>> Speaker 11: So in that case, when you pass in an object, first argument is gonna be the property name and the second argument is gonna be the value?
[00:12:34]
>> Bianca Gandolfo: No, it's gonna be the value and then property name and then the animal object. So where, for an array would be the index, for an object, it would just be the property name itself. And again, if you were nesting regular regular four loops, then you would start to have things like, you'd probably have a j in there, and it gets really complicated here.
[00:13:00] If, for example, this is like, I can't even think about what it could be like. Yeah, you can call it characteristics. Or we'll just call it char for short. And then you would just, it's easy to see, that we're gonna like, now we are console logging all of the characteristics of our animal object, versus something at i j.
[00:13:38]
>> Bianca Gandolfo: Cool. Awesome, so we're pushing our animal now what if we wanted to then,
>> Bianca Gandolfo: Actually do I have that one? Okay. Cool, so any questions about this? Pretty straightforward, awesome.