Reduce Javascript: Master the Basics

Today we shall be talking about the reduce Javascript array method, and how we can use it to reduce an array into just a single value. All code snippets written are in the Javascript language. Basic knowledge of the language is required to understand this article and implement the method effectively.

What is the reduce Javascript method?

The reduce Javascript array method is an essential component of functional programming that takes an array and reduces it into just a value. This is accomplished by running the callback function on each element of the array in turn, passing the result of the computation on the element before it.

const array1 = [1, 2, 3, 4];


// 0 + 1 + 2 + 3 + 4

const initialValue = 0;

const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue,  initialValue)

console.log(sumWithInitial);
// expected output: 10

The above code snippet is an array of numbers; when we call the reduce method on it, it takes the entire array and returns just a value which is 10.

Understanding the “reduce” Javascript parameters and argument

It is important to have a very concrete understanding of what the “reduce” Javascript parameters are if we must properly use the method. Below I’ve highlighted these parameters; we shall be taking them one after the other, then at the end put everything together to make sense of it.

1. callBack function
2. initialValue

Callback function

This function runs on each item in the array. On subsequent callback Fn execution, its return value is changed to the value of the accumulator argument. The return value changes to the reduce(), for the final invocation.

The following parameters are provided when calling the function:

1. accumulator
2. currentValue
3. currentIndex
4. array

Accumulator

This is the outcome of the last call to callback Fn, in value. If supplied, initialValue is used on the first call; if not, array[0] is used.

currentValue

This is the current element's value. If an initialValue was supplied, the value of the array on index 0 (array[0]) would be returned on the first call; if not, index 1 (array[1]) would be returned.

CurrentIndex

This is the array's currentValue's index position. If initialValue was given on the first call, it’s position would be on index 0; else, it would be on index 1.

Array

This is simply the array in which the reduce() method was used.

initialValue

A value that is used to initialize the accumulator on the first callback. If initialValue is supplied, callbackFn begins running with currentValue set to the first element of the array. If initialValue is omitted, accumulator is set to the array's first value, and callbackFn begins running with currentValue set to the array's second value. If the array is empty in this scenario (i.e., there is no initial item to return as the accumulator), an error is raised.

Putting everything together

reduce(Function (accumulator, currentValue, currentIndex, array) { /* … */ }, initialValue)

The combination of all these parameters should look just like the above code snippet.

How does the “reduce” Javascript method work?

Let’s dive deeper into this reduced Javascript method and see what’s happening behind the scenes.

const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4

const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue, 
initialValue
);

All the reduce Javascript method does is loop through the item, and each time it gets looped through we return an individual item and we get the previous value that we return from the reduce(). If it is the first item in the reduce(), we just get zero returned because that’s our default value. If we changed the default to 50, for instance, it would affect the array.

We take zero or the default number and add it to our first item; we would get a total that would be 1 in the preceding code. We do that again for the next item, which is 2. We add 1 + 2 and get 3; we continue this process until we get to the final item.

The table above gives a clearer picture of what happens each time we use this method. Note that this result will vary depending on initialValue.

Conclusion

On a final note, reduce Javascript is an iterative method. It collects all of the array's items into a single value by applying a "reducer" callback function to each element in ascending-index order. The callbackFn return value is always supplied as an accumulator when callbackFn is called again. Reduce returns its return value from the last value of the accumulator, which is the value returned from callback Fn on the last iteration of the array ().

While the function supplied as callback-Fn can modify, the array on which it is called, reduce() does not. However, take note that the array's length is preserved prior to the initial callback Fn execution.