This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.

Check out a free preview of the full JavaScript: From Fundamentals to Functional JS, v2 course:
The "_.reduce() Solution" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Bianca walks through the solution to implement _.reduce() function.

Get Unlimited Access Now

Transcript from the "_.reduce() Solution" Lesson

[00:00:00]
>> We're doing reduce, can someone tell me, from the documentation, what does this take? It takes a list and it takes a callback and then an initial value, right? Okay, so, All right, we'll skip the underscore part. Okay, so the first thing we need to do is we wanna loop through the list, right?

[00:00:37] For every loop, what do we need to do?
>> We're gonna hold this value.
>> We need to save the return value of what?
>> Of the callback.
>> So we call the callback with?
>> The value of the array at the index.
>> Yep, I'll just say arr[i], we know what that means now, and what else?

[00:01:12]
>> We combine them.
>> In the previous value, right?
>> Yeah, in the previous value, with the initial.
>> Yeah, or initial, depending, great. And then once we do that, we wanna save that value for the next loop, and then what?
>> We return the total or whatever it is that we get at the end.

[00:01:37]
>> Yeah, return the result, which will be one value, right? That's why it's reduced, it takes a list, and it reduces it down to one thing. All right, so let's try this. So let's loop through a list, let's just pretend that it's gonna be, An array always. And then, while i is less than list.length, come one, list.length, wow, okay, i++.

[00:02:20] All right, so we wanna call the callback, I wanna say callback, we're calling it, we wanna pass some arguments. We have our list at i, and then some previous value or something, right? This is not returning, this isn't, Referencing anything yet, it's just a holding variable for now.

[00:02:59] Or you can call this memo or accumulator value, okay. And then, we need to save that value somewhere, probably not in the loop cuz it would be reinitialized and that would be against our whole thing. So let's say we want,
>> Let memo equal initial.
>> Okay. We can also give initial, Can we do this?

[00:03:48] Anyone know? It's like referencing itself. I know, we'll just leave it there for now and see what happens. It's an adventure. So we say, memo = callback with these, applied, and then at the end, we wanna return memo, something like that. What do we think so far? What do you think?

[00:04:26] Anybody? Let's run it as a team. And then we're gonna have our function, it's gonna take a value, and then sum, All right. Okay. Are you guys ready to run it, in your minds? Who wants to go first? How about, Jenny?
>> I'll start with the first line.

[00:05:27]
>> Yep, let's start with the fitst line.
>> [COUGH] Setting the variable to reduce.
>> Yep, so we just set up our function definition to reduce, and then what happens, Josh?
>> We call reduce with those parameters.
>> Yeah, we call reduce, we pass it a list, we pass it a function.

[00:05:48] So now, list is gonna be 1, 2, 3, and our callback is gonna be some sum, just for reference here, okay? So I don't know if this works, but either this or, That's how we can do it, right, either way. So memo = initial or the first of our list, and so we want that to be 1.

[00:06:25] So in that case, we wanna start a little later, right, we wanna skip the first one. Actually, that's something we need to say. What should we do there? Something to consider is, what happens when, Let's say, I think what we wanna do, what happens when the first value becomes the initial value?

[00:06:57] We should account for that, we're not accounting for that in this scenario, but we'll get back to that, what error right here. So we'll start at 0, let's pass an initial. So in the case where we have an initial value, this is 0. List[i] is what?
>> [INAUDIBLE]

[00:07:23]
>> 1, yeah, so we pass 1 and then memo is what? You're right. Wait, no, let's list[i] is 1, and then memo is gonna be 0, okay? So we have 1 and then 0, we're gonna go into our function. v is 1, sum is 0, that is gonna return 1.

[00:07:52] So memo is now 1. Great, so now let's loop again, we'll reset this value. So i is now 1, list at 1 is 2 and a memo is gonna be 1. We do the same now memo is going to be 3. And we wanna loop again, i is now 2, second index is 3.

[00:08:29] That is going to give us 3 and 3. Those together it's gonna give us 6. We break out of this and we return 6 Seems good for our first pass Any bugs
>> This zero thing.
>> Yeah. So what do we do when we don't have an initial value?

[00:09:13] Because if we just reset it right then we'd be adding one plus one and then our value would be seven. You know what I mean? So that's probably not what we want to do. So we can just say something like if initial, Then let's just do this, if initial then memo equals initial else memo, April's I think we should do it actually in I think we should do it in here.

[00:10:04] If, I would say if i=0, and initial is not defined, then memo equals list at i + at 0 And then we're gonna increment i Like that. How's that gonna turn out? I, 0, and there's no initial value. Well, Okay, looks a little messy. There can be a more elegant solution here.

[00:11:04]
>> Meme of the undefined if there's no national
>> Yeah.
>> So then and not undefined.
>> That.
>> No, I mean, it's already
>> So if this is true
>> Yeah.
>> So and not. Yeah, that's right. So this would find, yeah. You're right, and is undefined.

[00:11:34]
>> Also, you could just,
>> Right?
>> That's double negation, right?
>> Yeah.
>> Okay.
>> Okay. No, let's see. Not true is false.
>> You can just remove that two the double negation entirely for the same thing couldn't happen.
>> What do you mean?
>> Well, isn't memo equal to double negated memo?

[00:12:06]
>> Yeah.
>> It's false.
>> No we want this to be true.
>> Yeah.
>> Because of the and so they both need to be true for it to enter into this block. I actually have a better idea, I like this better. Okay, I'm happier with that. Okay, What do we think?

[00:12:47] Seem reasonable? Probably we wanna pass more things into the callback.
>> The original list?
>> Yeah, and that kinda thing, but This is the basic functionality. So I'm going to trace it like we did before. Or actually how about you guys trace it since my uvula is swollen.

[00:13:11] [LAUGH] All right. Did you guys stress it before? I feel like I'm going crazy. You guys already traced it right? Okay. Well maybe I'll Do it this time, okay. So we have a reduced function we're calling it with two arguments or three arguments really, we have an array, and then we have a function.

[00:13:39] This function just returns the sum of two numbers. And then an initial value. So what we want to do is for every value in this list we wanna run this function on it. And we expect it to return one value, that value gets passed into the function as a second argument.

[00:14:08] And then the next value gets passed as the first so we have the value and then we have the sum that will get passed every single time. In this case it'd be three times that we'd go through. And this is our initial value. This tells us what we start with.

[00:14:25] If we don't have an initial value, we use the very first value in the array. But we'll have an initial value, it's a little bit easier to conceptualize that way. And then we'll do it without initial value and see how that works. Okay, so we called it. So list is that array 1, 2, 3, we have this callback function, a summation function, and then initial is zero.

[00:14:52] So we start off memo, memos initial. So that is gonna be 0, i0. And there's a bug. You guys see that bug? If memo is 0.
>> Then that would be a negative 0.
>> Yeah. JavaScript. Okay, So i is zero that's true memo is not undefined because it's zero.

[00:15:28] So we skip that we jump into this else block. We gonna call this callback function with memo, which is zero. Listed I Which is one, so we're going to call it with one and zero. Those are arguments. Just so we have it to look at. And here's a summation function.

[00:15:49] I can also write this longer hand if it's easier, but we're just need to add one and zero together. And that's going to return one. So memo is now updated to one. Okay, And we're gonna go now to the next loop. So i is equal to 1 at this point, i is not 0.

[00:16:12] So we never even go into the left side. Since this is false, we'll just skip it entirely. Go back and then we'll get back in this else block. List is what, let's say i is 2. Yeah, are we following, am I going too fast, okay? And then memo is 1.

[00:16:37] Okay, we add them together, that gives us 3 and we update memo is now 3. Now, we're gonna restart the loop, i is now 2, And, This is false. We're gonna run this. Listed i, Is 3, memo is 3. And so now we have 6 and we update memo with 6.

[00:17:13] We're gonna try to do the loop again but it's gonna fail because 3 is not less than 3, right? If we did that it would still run but we don't wanna do that. And since we went all through that, it will return memo which will return 6 down here, Okay?

[00:17:37] Any questions about that? No? It's kind of a mind, it's surprisingly simple for something so complicated. You know what I mean? All right, so now let's try it without the initial value. Okay, just switch it up a little bit. So here's our lists, 2, 3, 5. This is gonna be set to undefined because we haven't passed anything to initial, right?

[00:18:13] We need to put it there.
>> We gonna start i is 0. So i is 0. I is 0 and memo is undefined. So then we assign memo to list at 0. Which is 2. Then we loop again, now i is 1. And then we skip this. We go here, We're calling our callback with our listed i which is, whoosh, what was it again, 3 Plus memo, which is 2.

[00:19:00] So then we assign memo we update that to 5. Okay, now i is 2. We skip this one, we go here and we want to do 5, right, i list at 2 is 5 + 5 = 11 = 11
>> 5 + 5 = 11.
>> [LAUGH]
>> 5 + 5 = 11.

[00:19:41] Not true, 10, I've just seen you guys paying attention and you weren't caught you. So, We're done with this loop cuz 3 is not less than 3, And then we return 10. Any questions? No? All right, so that is reduce. And anyone got it running on their own?

[00:20:26]
>> Yeah
>> You just got that and go, nice.
>> I didn't put in that initial condition, I was so like kind of up here.
>> Yeah, that's good. All right.