Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 983 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Array.prototype.reduce in JavaScript by example

4:49 JavaScript lesson by

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use Array.prototype.reduce to:

  • Sum an array of numbers
  • Reduce an array of objects to a sum of a given property
  • Group an array of objects by key or a set of given criteria
  • Count the number of objects in an array by key or a given set of criteria
Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use Array.prototype.reduce to:

  • Sum an array of numbers
  • Reduce an array of objects to a sum of a given property
  • Group an array of objects by key or a set of given criteria
  • Count the number of objects in an array by key or a given set of criteria
Avatar
Alex

i wonder what is this editor that you use to produce your episodes? You all seem to use different editors, unless it is different settings of WebStorm?

Avatar
Erik

Hi Alex,

For this episode (and many others) the editor is JSBin. It looks like the JSBin link is broken, but you can view and play with the source/editor for this lesson here: http://jsbin.com/sapafe/latest/edit?js,console

We do tend to use a variety of editors since different lessons have different requirements and as instructors we have our own preferences. JSBin is great for small prototypal stuff and has great ES6/Babel support.

Personally, I use WebStorm combined with SublimeText day-to-day (you can peak at my Sublime setup here: https://egghead.io/lessons/ecmascript-6-es6-modules-es2015-import-and-export and my WebStorm setup here: https://egghead.io/lessons/misc-webstorm-installing-custom-color-schemes-dayleress-colour-schemes)

In reply to Alex
Avatar
Alex

jsbin is pretty cool. I did not know about it. thanks.

In reply to Erik

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?