Understanding Array.reduce(), JavaScript
November 13, 2024
•
3 min read
Of the number of Array helper functions, the most confusing and rarely used is the Array.reduce()
function.
Unlike the other Array helper methods such as Array.map()
and Array.forEach()
which takes a single function and processes the content of each element in an array and returns it, Array.reduce()
does not.
Array.reduce()
works like this, it reduces the array and returns a single result. It takes an initial value and a callback function and calls the function on the initial with the first element in the array and place the result somewhere and takes another element in the array and runs the function on it with the result and place the new result away. It does it for each individual element and return the final answer when there are no elements left.
Array.reduce(callback,initialValue)
Taking the code example below
How does it work?
Array helper methods have one thing in common, they perform some action to each element in the array. Array.reduce
is no difference.
The addNumbers
function we added as a callback takes two arguments. The first number and a second number and returns the sum. Now, when the reduce method starts, the first element of the array has is passed to the function, but the function needs two arguments to add. That's where the initialValue
comes in. The initialValue
, which is 0, is passed as the first argument and the first element of the array is passed as the second argument. The function runs and the returned results is now set as the new initialValue
and passed as the first argument and the next array element is passed as the second argument. The function runs until there are no elements left and the final result is returned.
Another Analogy
Take the header of this post. The chicken 🍗, popcorn 🍿 and burger 🍔 are taken into the body by calling the eat
function and they are reduced into a single 💩 and returned by the body.