JavaScript Array.reduce()

How do I loathe thee? Let me count the ways…

The Array.reduce() method has been around awhile. Like map(), filter() and find(), it operates upon an array of values by invoking a callback function.

Here’s an example from the developer.mozilla.org site:

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Seems straightforward, right? On with the grievances:

0. It doesn’t do what you expect

Let’s look at this again:

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// expected: 1 + 2 + 3 + 4 === 10

Now I’ll modify the reducer function to add 1 to each value of the array, then sum it with the previous value. Since I’m adding 1 to four array elements, I expect to get a sum of 14.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue + 1;

// (1+1) + (2+1) + (3+1) + (4+1) = 2+3+4+5 = 14
console.log(array1.reduce(reducer));

// unexpected output: 13

Hold on… what?

Turns out the first element of the array is the initial accumulator value. So, instead of

(1+1) + (2+1) + (3+1) + (4+1) = 2+3+4+5 = 14

It is actually:

1 + (2+1) + (3+1) + (4+1) = 2+3+4+5 = 13

All those reduce examples online that use a sum function as illustration can mislead you. You can get to the right answer, of course: just add an accumulator initial value as a second argument to the reduce method:

console.log(array1.reduce(reducer, 0));
// desired output: 14

1. It’s misnamed

The name reduce would lead one to believe that it reduces an array of element to a subset of those elements. That’s not really what it does. It can do the opposite of reduce, in fact:

const array1 = [1, 2, 3, 4];  // four elements
const increaser = (accumulator, currentValue) => {
  accumulator.push(currentValue);
  accumulator.push(currentValue*currentValue);
  return accumulator;
};

console.log(array1.reduce(increaser, []));

// output: Array [1, 1, 2, 4, 3, 9, 4, 16] (8 elements)

And it doesn’t even have to return an array:

const array1 = [1, 2, 3, 4];
const transformer = (accumulator, currentValue) => {
  accumulator[currentValue] = currentValue*currentValue;
  return accumulator;
};

console.log(array1.reduce(transformer, {}));
// output: Object { 1: 1, 2: 4, 3: 9, 4: 16 }

2. The order of callback arguments is weird

Let’s compare the callbacks of map(), filter(), find(), and reduce():

map: (currentValue, index, array, this) => {}

filter: (currentValue, index, array, this) => {}

find: (currentValue, index, array, this) => {}

reduce: (accumulator, currentValue, index, array) => {}

Your callback will get the accumulator as the first argument, not the currentValue; also, there is no parameter that takes a this argument.

3. Error: myVar.reduce is not a function

I’ve been spoiled by lodash, which treats both arrays and objects as collections, and collections have map, find, filter, and reduce methods. Not so JavaScript reduce:

var obj1 = {my:"dog", has: "fleas"};
            
const values = (accumulator, currentValue) => accumulator.push(currentValue);
            
console.log(obj1.reduce(values, []));

// > Error: obj1.reduce is not a function

As Dana Carvey used to say, “Nope, not gonna do it. Wouldn’t be prudent.” (Yes, I am that old.)

You can still do something like this, using Object.values or Object.entries:

var obj1 = {my:"dog", has: "fleas"};
            
const values = (acc, [key, value]) => {acc.push(value); return acc}

console.log(Object.entries(obj1).reduce(values, []));

// > Array ["dog", "fleas"]

4. Accumulator sometimes optional; results sometimes random

It’s easy to forget an initial accumulator value, even when you need one. Let’s take that above example, with one modification:

var obj1 = {my:"dog", has: "fleas"};
            
const values = (acc, [key, value]) => {acc.push(value); return acc}

console.log(Object.entries(obj1).reduce(values));

// > Array ["my", "dog", "fleas"]

Did you notice the difference in the code? Hard to spot. What’s worse, you get an array of values back, except the first is invalid. Good thing I have tests someday!

5. Undefined? Huh?

Oh, you forgot to return the accumulator. Silly you. I never make that mistake:

var obj1 = {my:"dog", has: "fleas"};
            
const dog = (acc, [key, value]) => {
  if (key === 'my') {
    acc.push(value);
    return acc;
  }
}

console.log(Object.entries(obj1).reduce(dog, []));

// > undefined

You have to always return the accumulator:

var obj1 = {my:"dog", has: "fleas"};
            
const dog = (acc, [key, value]) => {
  if (key === 'my') {
    acc.push(value);
  }
  return acc;
}

console.log(Object.entries(obj1).reduce(dog, []));

So what do I recommend instead of reduce()?

I am always using Array.reduce(), and you should, too. Just know its quirks. It’s like a tiny chihuahua nipping at your heels that sometimes will get you if you’re not paying attention, but it’s mostly harmless (and far more useful than a chihuahua).

Happy reducing!

<a href="https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href">https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href</a>