How does `.reduce()` actually work?

My knowledge of C is very limited. Not sure how I could help. Don’t send me your code.

ok … No problem. .

Thank you for this metaphor! Really helped to put this into perspective. I think that what is causing some of the confusion for me is the verbiage used right before introducing the second portion, or what I thought of as a plot twist of this exercise, because it showed me how much I need to review to fully understand:

"The .reduce() method can also take an optional second parameter to set an initial value for accumulator (remember, the first argument is the callback function!). "

This comes one bullet point down from stating:

" The callback function has two parameters, accumulator and currentValue ."

Example for context:

const numbers = [1, 2, 4, 10];

const summedNums = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue
}, 100) // <- Second argument for .reduce()

console.log(summedNums); // Output: 117

I feel like i’m on the cusp of understanding this… but to be sure…

In the context of the example, how is the “second parameter” not making this 3 parameters? Am I confusing two separate sets of parameters - i.e. Is the .reduce() only taking one parameter (the callback function, which has two parameters) and then we’re introducing a second parameter for the .reduce() method?

The terms ‘accumulator’ and ‘currentValue’ are generic, and need to be respected as such. Not only could the value be accumulating, it could be evolving if it is a data structure. This method is very powerful, and for a reason. To really learn the method you will have to find that reason, then everything will fall into place.

arr = [[1, 2], [3, 4], [5, 6], [7, 8]]
print (arr.reduce((a, b) => a.concat(b), []))
[ 1, 2, 3, 4, 5, 6, 7, 8 ]

Later on you’ll explore recursion and ways to drill into complex arrays. We need recursion to flatten nested arrays.

y = [[1, 2, [2, 1]], [3, 4, [4, 3]], [5, 6, [6, 5]], [7, 8, [8, 7]]]
y = y.reduce((a, b) => a.concat(b), [])
console.log(y)
y = y.reduce((a, b) => a.concat(b), [])
console.log(y)
[ 1, 2, [ 2, 1 ], 3, 4, [ 4, 3 ], 5, 6, [ 6, 5 ], 7, 8, [ 8, 7 ] ]
[ 1, 2, 2, 1, 3, 4, 4, 3, 5, 6, 6, 5, 7, 8, 8, 7 ]

The sum of 72 is easy to extract once we flatten it.

Can you explain this further?

Array.reduce(callback, [, starting value])

If we read the documentation for this method we see,

  • that it is a method of the Array class, so arr must be an array else it will throw an error,
  • the method takes a callback function as its first argument, which function must have two parameters;
  • the method takes an optional starting value as the second argument.

When there is no starting value specified, the accumulator is the first value in the array, and the current value is the second, at the start. When the value is supplied, the first value in the array becomes the current value.

function reduce(arr, f, acc) {
  for (let e of arr) {
    acc = f(acc, e)
  }
  return acc
}

The function above does not account for this and in order for it to work as expected must have the first value specified, no option. Apart from that, it is pretty much a good illustration of what Array.reduce() is all about.

Let’s create a couple of utility functions so we can take this puppy for a ride…

const print = console.log;
const aaddb = (a, b) => a + b;
const amulb = (a, b) => a * b;
const asubb = (a, b) => a - b;
const adivb = (a, b) => a / b;

const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]

print (reduce(values, aaddb, 0))       //  45
print (reduce(values, asubb, 45))      //  0
print (reduce(values, amulb, 1))       //  362880
print (reduce(values, adivb, 362880))  //  1

The print() function is for simplicity and less typing.

Thanks for the explanation! It’s the first reply in this thread that made sense to me as I was able to properly understand and visualize accumulator and currentValue utility.

This reply is awesome - thank you! Great analogy and really helps you visualize what is happening with the accumulator as it gets applied to current value. Thank you so much again.

1 Like