AppDividend
Latest Code Tutorials

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

0

JavaScript map(), reduce(), and filter() are pure functions that return a new array and does not modify the original array. These functions are array methods. Each one will iterate over the array and perform some kind of transformation or computation. The map() function will return a new array based on the result of the function. In this post, you will see why and how to use an array map() with an array reduce() method.

Javascript Map Reduce

To use the Javascript map reduce, first, you transform the array using map() function and then reduce that array into a single value.

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

JavaScript array reduce() function executes the reducer function on each element of the array resulting in 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. In general, some action is performed on the value, and then the new value is returned.

Example

// app.js

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

Output

node app
[ 1, 4, 9, 16 ]

You can see that the map() function returns the squared items of the original array. Please keep in mind that the resulting array will always be the same length as the original array. 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 to.

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

node app
69

In this example, our initial value is 0. Now, 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 is 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 is 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 is 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 the single value. As you can see, using array.reduce() is the 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.

See the following example.

// app.js

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 it will reduce it to one value.

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

node app
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 function with .map(), .reduce(), .filter() where it seems to fit. I guarantee your code will be way less clunky and much easier to read.

That is it for the JavaScript map reduce example.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.