Javascript Map Reduce: How to Use map() with reduce()

JavasSript map reduce a technique to transform an array using a map() function and then reduce it to a single value using a reduce() function.

The map() function creates the new array populated with the results of calling the provided function on every item in the calling array.

The reduce() function executes the reducer function on each array element, resulting in a single output value.

Array.map() syntax

arr.map(function callback(element, index, array) {
 // Return value for new_array
}[, thisArg])

The map() function takes the callback. Only the array item is required. Some action is performed on the value, and the new value is returned.

Example

const numbers = [1, 2, 3, 4];
const squared = numbers.map(item => item ** 2);
console.log(squared);

Output

[ 1, 4, 9, 16 ]

You can see that the map() function returns the squared items of the original array.

Please remember that the resulting array will always be the same length as the original.

In our example, the length of the elements remains the same, which is 4.

Array.reduce() syntax

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

The total argument is required. It is the initial value or the previously returned value of the function.

CurrentValue is the required argument. It is the value of the current element in an array.

The currentIndex is an optional argument. It is an index of the current item.

The arr is an optional argument. It is the array object the current item belongs.

The initialValue is an optional argument. It is a value to be passed to the function as the initial value.

Example

const numbers = [11, 21, 19, 18];

const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);

console.log(sum);

Output

69

In this example, our initial value is 0. In the first iteration, two numbers will be added, which are 0 + 11 = 11. In the next iteration, the old value will be 11, and the next value will be 21.

So, it will return the sum of 11 + 21 = 32. In the next iteration, the old value will be 32, and the next value will be 19.

So, it will return the sum of 32 + 19 = 51. In the next iteration, the old value will be 51, and the next value will be 18.

So, it will return the final output 69. So, this is how the reduce() function works.

The map() function returns the same length array, while reduce() method returns a single value. As you can see, using an array.reduce() is an easy way to generate a single value or object from an array.

Combining Javascript map() and reduce()

To use the Javascript array map() and reduce() combine, first, we map each array value to its square value and then use the reduce() function to get the sum of all array elements.

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

const sum = numbers
  .map(x => Math.pow(x, 2))
  .reduce((result, item) => result + item, 0);

console.log(sum);

First, we defined an array and then squared all the elements of the array using the map() function. The map() method does not change the length of the array so that it will return the same-sized array as an input array. Now, that output array will apply to reduce() method and reduce it to one value.

So, the sum of squared elements will be our final output. Run the file and see the output.

30

Advantage of using .map() with .reduce()

If you regularly write unit tests for your code, then you will find these methods simpler to test the functions you call with .map(), .reduce(), or .filter().

Try to replace some of your forEach() with .map(), .reduce(), and .filter() where it seems to fit. I guarantee your code will be way less clunky and much easier to read.

That is it.