I spent an entire Saturday trying to understand .reduce()

Phillip Kent Knight — Tue, 27 Aug 2019 21:14:39 +0000

Lately, I've been trying to up my js skills… including a run through some Javascript courses on Codecademy, which I was totally crushing until I got to reduce()… 🤯!!

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. (per MDN)

That description did nothing for me.

I had no problem working through and understanding other array handling methods like filter() and map()... but I hit a roadblock trying to grasp what reduce was all about. And I spent an entire day on it.

But now, I think I finally get it: we "reduce" an array of objects into one object by performing a function on each item in an array, saving the result at each step to an accumulator. It's kind of like the way we use a for loop, but here we're adding to (accumulating) just one result.

This "accumulator" thing, as I now imagine it:

If that doesn't help, here are the examples I wrote for myself to make sure I understood the basic nature of the accumulator.

How I got here

To get to this level of understanding, I had to look at MDN, blogs, youtube, and finally give up and ask a more experienced programmer (my friend Dave) to explain it to me like I was five.

This was what I got as an example:

While I now understand what's going on above, I didn't when I first saw it.

The resources that clicked for me

Finally, after several hours, I started to get it somewhere around my third read of Jason Belcher's post: "Map, Filter, and Reduce", which actually demonstrates rolling your own reduce-like function, and my second watch of the below video from The Coding Train on YouTube.

If you've made it this far down the page, you might be as frustrated and confused (and determined) as I was - I hope these links will help you like they did for me me!

DEV Community: Phillip Kent Knight

I spent an entire Saturday trying to understand .reduce()

That description did nothing for me.

How I got here

The resources that clicked for me