Reduce an Array into a Single Object

[00:00] All right, so let's say you just went to your local front-end programming meetup and you took a vote. You went to everybody there, and you asked them to name their favorite front-end programming JavaScript framework.

[00:15] The votes start pouring in. You got some votes for Angular. You got some React, another Angular. It's the Amber dude in the corner. There's another React, and there's always one, right? "No, I don't need no framework. I love spaghetti."

[00:37] What we want to do now that we have this list of votes is we want to turn this into an object that gives us the number of votes for each framework that was named. Well, you should think to yourself, "I've got an array, and I want to turn that array into an object. Hey, this is a job for Reduce."

[00:57] Let's remember how Reduce works. We've got our accumulator, and that accumulator's going to be an object. Let's set our initial value for that accumulator and it's just an empty object. We've got our reducer, and that's going to take the accumulator. Let's call it the tally, and it's going to get each of these votes one after the other.

[01:19] Remember the way this works is tally here is whatever got returned the last time this reducer was run, except on the very first item where the tally is the initial value. Then vote is just going to be each of these items in a row. Here's how we're going to do this.

[01:35] We're going to say if the tally does not have a key with the same name as that vote, then we're going to create one. We're going to set its value equal to one. However, if the tally already has a value for that particular vote, we're just going to increment it. Then, because this is a reducer, it's very important that you remember to return your accumulator.

[02:08] The result of our informal poll is going to be votes.reduce. It's going to take our reducer, and it's going to take our initial value. Now let's just step through and make sure we understand exactly what's going on here. We've got our votes. We're going to reduce it using this reducer.

[02:31] This reducer's going to take the accumulator and it's going to take the first item in the array. The vote here is going to be Angular, and the tally is going to be this empty object. It's going to say, "Hey, does tally.angular exist? No? Great. Tally.angular now equals one. Return tally."

[02:52] It's going to get called again. Vote is Angular again, and tally is the return value from the previous iteration. It's an object with one key, Angular, whose value is one. Now when we get to our logic we're going to see it does exist, so we're going to increment that. Now we're returning an object whose key is Angular and whose value is two.

[03:13] We get to the third item here, React. We'll vote as React. Tally is this list of Angular is two. We're going to create a new key, and we're going to say, "Tally.react is equals one." When we return that, it's an object. It's got two keys, Angular whose value is two, and React, whose value is one and so on and so forth.

[03:33] We're going to step through every item here, and we're going to integrate each of those items one at a time into our running tally. Because this is reduced this whole thing evaluates to the value that gets returned from the very last call of the Reduce function.

[03:50] When we run this, we see we had three votes for Angular, four votes for React, one vote for Amber, and one vote for no framework.