Intro to Array.reduce()

Array functions

There are some basic array function which about every developer has some knowledge, or at least some idea what that functions do. These functions are: sort, map, findIndex, includes. But there are some powerful Array functions that good to know about. Maybe someone start using this later in their project or with this article it would be easier to understand he Array.reduce() function.

Problems

What if you have an array of numbers, and want to calculate the sum of every element? Maybe you loop through over the array, create a sum property, set to zero and add the values together, and the end of the function return with the summed value. Something like this:

const numArray = [1, 4, 5 ,6 ,8];
let sum = 0;

for (const num of numArray) {
    sum += num;
}

If you have multiple arrays to add together, you have to do calculate the sums multiple times, or write a function that accept an array parameter and return the expected sum of the array than add that values together.

What if you want to calculate the sum of the factorial of an array? Okay, perhaps you never want to do this, but imagine ...

Reduce function

In above mentioned use cases the reduce function can come in handy. According to the MDN Docs
The reduce() method executes a **reducer* function (that you provide) on each element of the array, resulting in single output value.*

The functions accepts a callback function with 2 required and 2 optional parameter. The first 2 parameters are:

accumulator & current value

If the naming make someone confused, the simplest way to think about the accumulator: a temporary storage for the computed values in the previous loops.
The current value has a more clear name: it holds the value of the current iteration (something like array[index]).

The last 2 parameter is optional, but just for mention: the third one is the currently processed index (starts from zero when initial value given, start from 1 when initial value is leaved empty) of the array, and the fourth one is the array on currently calling the reduce function.

Initial value

You can provide initial value for the reduce function. If no initial value is provided, the first element of the array will be the initial value (and the index property - third argument of the function - will start from 1!)
But enough talking, lets see some examples that can solve the missing pieces now.

Examples

Lets revisit the sum of an array with the reduce function:

const reduceSum = numArray.reduce((alreadySummed, current) => alreadySummed + current, 0);

If we try to examine the values in each iteration for the above mentioned array, the following stands:

If no initial value provided, the reduce function simply skip (but set every property according to) the first row mentioned in this table, and everything goes on from the second row.

Future discussion

Of course there are several more sophisticated, complicated usage of the reduce function. You can count values in array of objects based on a key, transform values according to an ENUM. You can return an array or an object from the function not only a number or a string. This is just an introduction to the function.
Hope you find it interesting, this is my first post here. Please add your remarks in the discussion!