Transform an Array into a Single Value using Reduce

[00:00] A pretty common thing that we all do as programmers is we take some kind of a list of data in the form of an array and we need to transform it into something else. A really powerful way to do that in JavaScript is by using the reduce function, which is built into all arrays. Now in order to use reduce, you need two things. The first thing you need is a reducer, and the second thing you need is the initial value of the accumulator.

[00:27] Here's how that works. Let's say we have a list of numbers and we want to add them all up. This is the classic example of reduce. Our reducer looks like this. It takes two arguments. The first argument is called the accumulator. The second argument is the item in the array that you're going to be integrating into the accumulator. What you're going to do is you're going to return a new accumulator.

[00:54] Because we're summing up an array, we're going to return the previous accumulator. This is what got returned the last time this function was called. We're just going to add that to the current item.

[01:08] If the accumulator here is always the previously returned accumulator value, then the very first time this runs, we need to provide some sort of a specific value so that it knows what to start with, since it never worked. It never fired before. The second thing we need is the initial value. For now let's just call that zero.

[01:30] Now our array so far is empty, but let's run with this. I want to show you that it doesn't crap out or anything if you call it on an empty array. When you say var total equals data.reduce, reducer initial value, if your array is empty, that just means that this function is never actually going to fire. Because this calls once for every item in the array. If there's zero items in the array, this is going to fire zero times.

[01:56] What's going to happen is your initial value is just what's going to get immediately returned. Let's prove that that works the way I'm telling you. Console.log. The sum is...You can see, here the sum is zero. That's not just a random zero. That is exactly the initial value. If we pass in 10 instead of 0the sum is 10.

[02:23] Let's set this back to zero for now and let's add an item to our array up here. Let's add the number, I don't know. Let's add the number 15. Now the length of our array is no longer zero. The length of our array is now one, which means that this is going to fire once.

[02:41] The initial value is zero. That's the initial value of the accumulator the one time this runs. The only item in this array is the number 15, so this is going to fire once, and it's going to return 0plus 15. The total we should expect to see is 15, and we do.

[03:00] Now let's add a couple more values here. Let's add 15 plus 3 plus 20. Let's step through how this is going to work. The first time it fires, the accumulator value is 0and the item is 15. It returns 15. The second time it fires, the accumulator value is 15, because that's what got returned the last time. The item is 3, so the total value here is 18. Finally, it's going to fire a third time, so the accumulator value is 18, and the item value is 20, and so that's going to return 38.

[03:36] Now the way this always works, the reduce expression here, this whole thing is an expression. That means is evaluates to a specific value. Array.reduce always evaluates to the final value of the accumulator, so this whole thing is just going to be 38.