Transcript from the "forEach Method" Lesson
[00:00:00]
>> Brian Holt: That's the for loop method that we showed you here. This is a little bit different way of doing it. So, cities or arrays rather has a function on it called forEach. Now, forEach is a function that accepts a function, which is like a little bit of function-ception for you.
[00:00:25]
But let's unpack that a little bit. So let's make that even a little bit more,
>> Brian Holt: Let's make it more abstract, and then we'll make it more concrete. Okay, so if I have const someFunction, I can actually assign variables to be functions. So function thing, and this just returns 5.
[00:00:51]
>> Brian Holt: Okay, so we haven't done this previously, but I think, hopefully, this makes sense. We can pass around functions just like we pass around variables. So now, I can call some function, okay, right? That makes sense. It's logging on 5 there because that's all this does is return 5.
[00:01:09]
But now, what if I have const someOtherFunction, and that's a function that accepts a function as a parameter, and all it does is return function being called. Let's just get rid of that for a second.
>> Brian Holt: So now, if I call someOtherFunction. And I pass in someFunction, what would you expect to happen?
[00:01:50]
>> Group: 5.
>> Brian Holt: 5, right, so, some function, is a variable that represents a function, right?
>> Brian Holt: And that function just returns 5. And now, I'm passing that function to here, to this parameter, and I'm calling that function.
>> Brian Holt: So the basic thing I'm trying to represent to you here, is that you get to treat functions like variables, right?
[00:02:16]
You can pass around functions.
>> Brian Holt: Which, is one of the more powerful things that JavaScript is capable of, in my opinion.
>> Brian Holt: So going back up here to ForEach. ForEach is a function that accepts a function, right. And, what this particular function does is, it runs this function, once per every item on the array.
[00:02:40]
Okay, so for cities I have 12345. How many times does this function here get invoked? Five times, right? It gets called once for every item in the array. So here, and then this city here is it's being passed in every single item, right? So, the first thing it's going to pass into Seattle.
[00:03:03]
The second thing that's going to pass in is San Francisco, so on and so forth, right? So, if we come back down here, you'll see that it is logging out every item in the array because it's constLogging that, yeah?
>> Speaker 3: Why is it the method two city instead of cities?
[00:03:20]
>> Speaker 4: That can be I even, right?
>> Brian Holt: This right here is that what you're asking?
>> Speaker 3: Yeah.
>> Brian Holt: It can be whatever, it's just the name of whatever I chose to call it. Just like it's a parameter, right? I chose to call this one fn. I could have called it lol.
[00:03:35]
It's just the name of the variable.
>> Speaker 3: Okay.
>> Brian Holt: Does that answer your question?
>> Speaker 3: Yes.
>> Brian Holt: Cool.
>> Speaker 4: City is more logically connected.
>> Brian Holt: No, no whatever, I'm sticking with that.
>> Group: [LAUGH]
>> Speaker 4: In this context, it gets confusing.
>> Brian Holt: Yeah.
>> Speaker 5: So, every time you would write this forEach, would you call it a loop?
[00:03:55]
Or, I guess when you call the forEach function on a an array, you would always call function with some variable name in there. And the variable name will represent, they'll always be each element of array, correct?
>> Brian Holt: Yep, so you can be assured because this is the way that forEach works.
[00:04:16]
That the first parameter that you get is going to be whatever item in the array that you're currently working on.
>> Speaker 5: And if you have an array of objects, then that would give you the entire object.
>> Brian Holt: Correct, whatever is in here, right, so if I put true here just again to upset you.
[00:04:32]
The last thing in here is gonna be true, right? Now, I believe there's a second secret parameter, that I put index here, it will actually give you whatever index you're on. 0, 1, 2, 3, 4 as well. So, if you need that particular index, like we did up here, right, what i represents, you also have access to that.
[00:04:55]
Most time, it doesn't matter so you can just ignore it. You don't even have to accept the parameter. And that's fine, they're okay with that.
>> Speaker 5: And if you are working with an array of objects that were like people like we used before. I could say function, whatever name and it would print out all the names, as opposed the objects, would that work?
[00:05:16]
>> Brian Holt: So, like if these were objects and they have like .name.
>> Speaker 5: Yeah.
>> Brian Holt: So it would try and like loop over.
>> Speaker 5: No, so you leave cities right there but there will be like whatever.name
>> Brian Holt: Here?
>> Speaker 5: Yeah.
>> Brian Holt: Uh-uh, that's not gonna work.
>> Brian Holt: There's kind of a way you can do that.
[00:05:38]
>> Speaker 5: Even getting in the weeds, feel free to stop me.
>> Brian Holt: Yeah, I mean you can do what's called de-structuring here, I'd have to put these curly braces there.
>> Speaker 5: Don't like that at all.
>> Brian Holt: Yeah.
>> Speaker 5: [LAUGH]
>> Brian Holt: Yeah, just a little off in the weeds.
>> Speaker 5: Okay.
[00:05:53]
>> Brian Holt: We'll come back to that one, yeah.
>> Speaker 6: And then, when you're creating parameters, you don't have to declare them anywhere else beforehand, they're declared right then and there.
>> Brian Holt: Like this one right here. Yep, just declared right there.
>> Brian Holt: You have to play fast and loose.
>> Brian Holt: Which again, it's a double edged sword like it helps you be really productive.
[00:06:19]
It also will create problems for you. Eventually just kind of get used to, you shoot yourself in the foot so many times you kind of get used to it. It's like Stockholm Syndrome. [LAUGH] I like JavaScript. I quite enjoy it.
>> Brian Holt: I've been doing it for a decade, though, so.
[00:06:37]
>> Speaker 7: Says our kidnapper.
>> Group: [LAUGH]
>> Brian Holt: Yep.
>> Brian Holt: Other questions?
>> Brian Holt: So, if you ask me which one of these I prefer, I prefer this one. And what's curious about this, I probably didn't learn about forEach and how it worked until probably like five years into my career.
[00:07:01]
I just went to some meetup, I don't even remember who was speaking, it was in Salt Lake City. And someone started talking about this new fangled functional programming thing, which is not new fangled, but it was to me. And I once I started learning about it and getting more interested is I wish I had learned about this way earlier in my career.
[00:07:23]
So this is like the tip of an iceberg of an entire paradigm of programming again called functional programming. So there's another one called map.
>> Brian Holt: Works relatively the same way as forEach. But instead what happens if I do return city.toupperCase[ ]. And this will be const newCities = that.
[00:07:53]
And I come over here and say a console.log, new cities. And I got rid of this. Yeah, look, dynamic programming. So now, I have a new array here from new cities and everything is to uppercase. So what map does again works relatively the same way as for each, it goes over every item in the array once.
[00:08:19]
But whatever you return, it creates a new array with whatever those things that you're returning. So the idea behind map is you're taking some array of something, and you're transforming into an array of something else, right? So I'm just taking those, and I'm returning everything into uppercase. And that's why I get a new array here.
[00:08:39]
Keep in mind that I have not modified cities. So, if I come back in here and I log cities above it, cities is totally unchanged, right? But now I have a new array here in new cities that is everything into uppercase, right? Make sense?
>> Speaker 8: If you didn't create the new cities constant, would you still have a new array or just be the same?
[00:09:08]
>> Brian Holt: So, if I didn't do this? Is that what you're saying?
>> Speaker 8: Yeah.
>> Brian Holt: This would still be run, but it wouldn't be stored anywhere, right? So, this would return something that would just be thrown away, right? So you have to store it somewhere. It would be the same as saying, 2 + 2, that's valid JavaScript.
[00:09:30]
That will run, that's not gonna crash the program.
>> Brian Holt: But since, this is not being stored anywhere, it's just executes that and then moves on.