JavaScript: From Fundamentals to Functional JS, v2 forEach and _.each Solution

Transcript from the "forEach and _.each Solution" Lesson

[00:00:00]
>> Let's start with our underscore, right? It's an object, and then we're gonna say, underscore dot each equals a function, what does that function take? Do you remember? What's the first argument?
>> A list.
>> A list, and the second one?
>> Lack function.
>> Yeah. Awesome, so, I'm just gonna write some pseudocode out just so that we can think through it before diving in.

[00:00:36] So first we want to loop through the list. And then in each loop I ended there because for each loop I wanted to call the callback with a list item. Alright, and then we need to make sure that it works with both objects and arrays, and so, for objects and arrays, the loop is you should use different loops.

[00:01:09] Like we mentioned before, arrays work well with the for loop with the I in the semicolons. Because of the numerical indices, objects work better with the forehand loop. We say for var ki N, ob that one. So we're gonna check which was an array if it's an array, we'll loop through it with the other one with the loop with the i and the semicolons, that one, the numerical loop.

[00:01:34] And then, if it's an object, we'll do the foreign loop, okay? How do we check if something is an array?
>> If type of list equals, equals array. Like this?
>> No, not a string, [INAUDIBLE] is array there's a function called is array.
>> You're right. Yeah, so remember this is not gonna work, this is a sad booth, sad face this won't work because arrays are objects that's always going to return false.

[00:02:26] But you're right, we do have this handy function array.is array, and we pass the list this is going to return true if the list is an array. Great, so we got that, and then otherwise, else we can do that we can loop through object, right? Just knows for ourselves, right?

[00:02:51] Loop through array, okay, so we got that part. I forgot the most important part, which you should do at the end of everything is to celebrate, not to self. Okay, so what's that loop that we want to use for the arrays again? Anyone?
>> For var.
>> Yeah.

[00:03:43] Okay, so I'm just saying, start at zero, keep looping until we get to that length and increment by one each time, that's what that means, cool. So, now we wanna call a callback, right? So, how do we call a function? We haven't really talked about that too much yet, but we just refer by name.

[00:04:10] In this case, it'll be called callback, and we'll pass it the value from the list, which we say list that i, this is gonna return the value. And then just the API for the each function and send it, sends the index, and then it sends the entire list, that's just how it works, okay?

[00:04:33]
>> [INAUDIBLE]
>> Yeah, sure. So, the expectation for each and just be careful different versions of each jQuery has an each, there's for each and then there's underscore each. Sometimes the these arguments are swapped, but for underscore each is first going to be the value, then the index and then the list.

[00:05:01] So inside of the callback function, you'll have access to value, the index and the list every single time. Which is handy because you want this to be a generic function that can be used in various contexts, we don't really know what our future users are gonna need this for.

[00:05:17] So I'll just work and to have all of the data available.
>> Do we need to define callback somewhere else then?
>> It's there, or, you mean, well, so we we'll get to that actually, that's a good question. We'll get to that, but yes, we do, but we don't need to define it, we need to pass it, because it's a function.

[00:05:43]
>> Okay, right.
>> All right, cool, any questions about how we handled the array? Before we move on, maybe actually will. Call each so that you can, we can look at it with some data, so, we'll see each and then let's think of a name. Okay, so we have some names and then we're gonna pass in a callback function.

[00:06:29] I'm just gonna put an anonymous function here, because I'm lazy that's why. And then let's see, so name, index, we'll just worry about the name, index. And maybe this is an array of brothers and sisters, or maybe animals because porgy would be a really bad name, maybe it's a nickname.

[00:06:52] Anyway, you It's a series of names and it's an order of oldest to youngest or something like that, so there's an order. So this function is going to say that, name is younger, then name, then, we do need this, list. So we can say, I'm just gonna say if.

[00:07:32] Name you guys are letting me do some crazy stuff, you gotta be my linter name i+1. So the next one so if there's an i+1 will say that the current name is younger the name i+1, else we gonna console that log that name that won't work right we don't want to, we want it to be variable name is the oldest.

[00:08:14]
>> Do we want list i+1?
>> Yes Why is that not matching? As last base. Okay. All right, so we understand what's happening? For each one of these, so Sally is the youngest, George is in the middle, Porgy is the oldest. And we gonna loop through, we're going to check if there's an item after the current index.

[00:09:05] We gonna console log that Sally is younger than Georgie, yeah? And then if there isn't one then we'll say Porgy is the oldest, okay? So, now let's take a look, so this is us using the function now let's look at the internals. This is the part that usually we don't think about, we just trust that it's gonna do what it's gonna do, and then see what it does.

[00:09:36] And if it does the right thing, we're happy, if it doesn't, then we kinda fiddle and maybe hope for the best, I don't know, that's my strategy. It's not very effective, so let's think critically about this. Okay, so list is what?
>> The array.
>> Yep, list is the array, callback is what?

[00:10:01]
>> Function.
>> Yeah, this entire function, okay? Keep that in mind, that's important. So, if a raider is array list, what does that evaluate to gray sweater crew? Anyone over there? This is gonna be true or false? You can join them to true, yeah. So this will be true.

[00:10:33] And so we'll hop into this block here. So, we'll loop through the length of the list, and we gonna call this function with three things. The first one is the value list that i, so the very first loop, i equals what?
>> Zero.
>> Zero, and so, list that 0 is what?

[00:11:02]
>> Sally. Sally, yep. What's i again? 0, and what's the list again? Grey sweater crew? The array, awesome. So we have this, and it's gonna line up with this. So list that i Sally is gonna be name i zero and list is the list, following? They hang to like snake through it, so we're gonna hop in, I'm gonna write us a note here that we have Sally, and we're at 0, just so we know.

[00:11:42] And so the list at i, which is 0 plus 1 equals 1, that is going to be what? True or false?
>> True isn't [INAUDIBLE]. Gonna be Georgie, which will be true, it exists, this will be true.
>> And then we'll console log that.
>> Sally.
>> Sally.

[00:12:16]
>> Is younger than.
>> Anyone?
>> Georgie
>> Georgie, yeah, we got it, cool.
>> And then it will do that for each one, so then it will do the same thing for Georgie, I'm not going to go through it all. Unless you would you like me to go through it one more time to review, or do you think we feel solid on how this works?

[00:12:37] So one more time, solid. Don't do it, okay, cool, awesome. Now.
>> [INAUDIBLE] list one t here.
>> Yeah. All right. So else, we gonna just loop through, we gonna assume, otherwise this is an object and we want it to work the same for an object. That's the nice thing about underscore versus native array for each, is that, you know, you don't have to coerce it into an array.

[00:13:19] We'll see later on some tricky things that look like arrays but are really objects, so. So we gonna say call back, how do we get the item?
>> List bracket key.
>> List bracket key, why is it brackets? Yes, no, because it's not numeric, because it's a variable.

[00:13:52] Yeah, also non numeric, but we would have to do that or not and then how do we get the index?
>> I say index because it's not array isn't just key.
>> Yeah, just key and that's going to be the property name.
>> There you have it.