Array.prototype.reduce in JavaScript by example

[00:00] Let's take a look at putting JavaScript's built in array reduce method to use. We have a numbers array here. We call reduce on that. It's going to accept a function, and the full signature is going to be the previous value, the current value, the index and the array that we initially called this on.

[00:24] If we just log this out to the console, we can get an idea of what we're working with here. We see that each time that we go through our current value and the index is changing. The reason that previous is undefined here is because we're not returning anything.

[00:41] If we go ahead and just return the current value, see that there. You'll notice that we're starting on index one. That's because we didn't parse the additional parameter, which takes an initial value.

[00:58] Without that, it's going to default to just start with the current of the second item or the index of one, and the previous is going to be one. We can see that here, the previous was one. If this parse this in, and let's just say, hello, we can see that there.

[01:16] Let's take a look at putting this to use, and let's just sum all of our numbers up here, as an example. Say total sum, and we're going to numbers reduce. We're going to reduce this down to the sum of our previous and our current value, and we'll just return the previous plus the current, and here's our total sum.

[01:39] We can accomplish some things a little more useful than just summing up numbers. I'm just going to paste in...we have an array of people here. They have some attributes, years of experience, and the department they work in. We have a function here that's going to allow us to classify that experience.

[01:55] The first thing we can do is let's sum up all of their experience. We'll just log this to the console again. Let's say, this is all experience sum. Again, this is going to be reduce, so people reduce. Then, we're going to have access to our accumulator here and the current.

[02:18] What we're going to do is we're going to return our accumulator, which actually, we'll just rename that to our sum. We'll add the current years experience.

[02:33] Of course, we're going to have to parse in zero, otherwise, our first time sum would come in as the first person, and that's not what we want. I'll parse in zero as our initial value with an extra parenthesis here. Here's our total sum for all of their experience.

[02:52] Let's do something a little more complex than this. We're going to log out the sum of each department's collective experience. We'll build up this department experience sum's object.

[03:03] We're going to get this from our reduce, and we're going to have a function here with our accumulator and the current. We're going need an initial value an object. This is what we're going to be building up.

[03:21] Let's pull a department out of the current here. If we don't already have an entry here on our accumulator for that department to hold the sum, we'll make sure we'll set that to the default value of zero. Now, we're going to increment that according to the current employee's experience. This is going to be plus equals the current year's experience.

[03:51] Now, we just need to return that accumulator. That's going to be parsed in in the next time in the next iteration. If we log that out, we're going to see that we've summed up the engineering experience here. We have 15 years here and 5 years there, so 20. We have the accumulative experience grouped by department.

[04:13] We could do a little bit of renaming here just to clarify our accumulator. We could just call that our grouped by object. The current would be the current employee just for this function here. This will be the employee.

[04:30] I'm just going to pace in a few more examples here, just to illustrate. We can answer all of these different questions, group employees by experience, count the number of employees in each department all answering that just on this simple array by making use of that reduce function.