This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "forEach Function" Lesson
[00:00:00]
>> Now let's add each. So each, I'm using _each here for this example, because we're gonna implement underscore style each later and we're gonna get to that next here. Well, let me just show you an example of what happened, talk a little bit about each. So each takes two arguments.
[00:00:23] First thing is list. The second thing is a callback function. Also we call this the iterator function. And we call it an iterator function because iterator is related to things that can be looped through. And so arrays, right, we loop through arrays. This would be the iteratee, the thing that is being iterated.
[00:00:47] And this is the iterator. But anyway, I think it's simpler just to think of it. This is a list. This is the callback function. It's gonna be called on each item in this list, yeah? And so suspects, the very first loop that it calls is gonna be Miss Scarlet, and it's gonna be passing to this function.
[00:01:11] So name would then be Miss Scarlet, right? And then it's gonna keep doing this, same thing as before. I kinda changed the naming there, but same idea. And then second, we'll do the same thing with Colonel Mustard. Name would be Colonel Mustard, and we do some stuff there.
[00:01:30] And we'll do that all the way through till it reaches the end of our array, cool. Any questions about how this works? No, okay, and there it is again when we consolidated it onto one line. Questions, comments, opinions about this version of each? Have you guys used the _each before?
[00:02:01] No, have you guys used native foreach? No, okay, so we have a mixed bag, awesome. So this is our very first kind of functional utility. I say kind of because people who are really into functional programming would say that it's not, especially underscores version of it, but who's counting?
[00:02:26] But more or less, it's the same idea, right? We have, Instead, we're kind of abstracting a loop into a function, right? So instead of doing our for loop, which we've been talking about for, I don't know, an hour now, we're using each, and each is a function. And the reason we want to do that is because it prevents errors, really, and it's more readable, right, cuz it's really clear.
[00:02:55] We can say for each of this data structure, do a thing, right? It's much more readable than, for example, all of these, var i equals, etc. If you say that that's less than and equal to here, that can give you an off-by-one error. There's a lot of things that can go wrong.
[00:03:16] So each is really awesome. We have forEach that comes for free. The reason that we're implementing _each is because if you notice, forEach, the way it works is you have an array, and then you say .forEach and you pass it a function. It's a lot harder to write than just passing that as two arguments.
[00:03:45] Cuz once we have to put this .forEach situation means that it's a method on the array. And for a method on the array, we have to get into prototypes and object oriented stuff, which I already said when I mentioned this is beyond the scope of this course. But just know that that's why we're not doing this version, and instead, we're doing a version where we're passing the arguments.
[00:04:09] You're welcome to do it if you're familiar with how methods work and inheritance works and stuff like that. It can be fun to implement your own array method like this, but we won't be doing that. What does each do? What is each useful for?
>> Looping through lists.
[00:04:33]
>> Mm-hm, yeah, absolutely. And over here, what's the difference between forEach and _each?
>> Readability.
>> It does read different, it does read different. People would say, though, that, well, I'm gonna take that back. I think it's controversial which one is more readable, I'll say that. Yes, but they do read differently.
[00:05:11]
>> You said forEach is called on the array itself as opposed to taking the array as an argument.
>> Yep, exactly, exactly. So what is this thing here? This, lovely friends, this is the gray area. I guess we're all wearing gray sweaters, gray sweater club.
>> [LAUGH]
>> The underscore?
[00:05:38]
>> What is the underscore?
>> Yeah, one of the libraries you asked at the beginning.
>> Yeah, it's a library. Have any of you all used the underscore library? You have?
>> I used low dash.
>> Yeah, you used low dash? Okay, yeah, similar thing, same, almost exactly the same actually, if you asked me really.
[00:05:58] So if I said, type of underscore,
>> Objects?
>> It's an object. How do we know it's an object?
>> It has a dot.
>> It has a dot, yes, yes he remembers, makes me so happy. Yeah, so somewhere in underscores documentation, it just says var _ = an object.
[00:06:30] And then it has each in there or something, which is a function that takes stuff. So that's underscore, that's kinda confusing for people sometimes. The point I like to make in this workshop, is that it's all the same repeated, and just like oddly a little bit different here and there.
[00:06:55] And we kinda take things for granted and think it's a special thing like jQuery. People think the dollar sign is a special jQuery thing. But really, jQuery is just like var $ = some function that takes a selector or something. And it returns an object that has jQuery magic, something like that.
[00:07:22] Yeah, so it's not anything that you don't already know. Okay, great, each. I think we exhausted that. So let's use each. What is this gonna log? We made it to the back of the room again. You're in a group of one, so you get to answer every single time, unless Mark.
[00:07:58]
>> No, what was the question?
>> What's this gonna log? What's it gonna log?
>> What's it going to log?
>> Mm-hm.
>> It will log in order observatory, ballroom, and library.
>> Yep. Exactly.