August 29, 2020
3 min read
Of the number of Array helper functions, the most confusing and rarely used is the
Unlike the other Array helper methods such as
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.
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.
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.
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.