reduce method in javascript

What is the Array Reduce Method in Javacript?

by
Spread the love

In this article, we are going to learn about the Array Reduce method in Javascript. If we want to get or return a value from an array in different scenarios, we can use the reduce method.

Array Reduce method in Javascript

Usually, if we want to perform any action on an array and then get a value from it, we use loops. The Reduce() method replaces using the loops on arrays. It is more semantic and it will help to understand the functionality better.

Syntax of Reduce() Method

reduce(callbackFn)
reduce(callbackFn, initialValue)

The Reduce() method takes two arguments as parameters. One is the callback function and the other is the initial value to run the function. I will explain this with an example.

Example 1 for Reduce() Method

const array = [10, 25, 36, 40, 55];

const total = array.reduce(sum);
console.log(total); // returns 166

function sum(previous, next) {
  return previous + next;
}

In the above example, we have an array with numbers as a list and we perform the summing of elements in the list. We usually do this using let’s say for loop. Now, we are doing the same with the Reduce() method in a cleaner way.

We have created a function called sum, which has two arguments, previous and next. Those are the parameters, which help the callback iterate the array and return the value.

If you notice, in the above example, We did not pass the initial value to the reduce function as per the second syntax. Now, let’s learn about it in the following example.

Example 2 for Reduce() Method with Initial Value Argument

const getMax = (a, b) => Math.max(a, b);
const array = [10, 25, 36, 40, 55];

const total = array.reduce(getMax);

console.log(total); // returns 55

In the above example, we are trying to find the largest number in the array using the Reduce() method. It is similar to the example we discussed above. It returns 55 as the largest number after we call array.reduce().

Now, let’s add an initial value, to it and recheck how this reduce() method works with an initial value.

const getMax = (a, b) => Math.max(a, b);
const array = [10, 25, 36, 40, 55];

const total = array.reduce(getMax, 60);

console.log(total); // returns 60

In the above example, we have passed 60 as an initial argument to execute the reduce() method.  Now, the reduce() method takes 60 as an initial value, compares it with elements in the array, and returns the result.

If we are passing the initial value to check the largest number, the reduce() method compares it with all the elements in the array.

If we want to sum up all the elements in the array along with the base initial value, it adds up to the elements in the array and returns the result.

const array = [10, 25, 36, 40, 55];

const total = array.reduce(sum, 100);
console.log(total); // returns 266

function sum(previous, next) {
  return previous + next;
}

If we are executing regular arrays, we may or may not need to supply the initial value. But if we are dealing with an array of objects, we must pass the initial value.

const objects = [{ x: 1 }, { x: 2 }, { x: 3 }];
const sum = objects.reduce(
  (accumulator, currentValue) => accumulator + currentValue.x,
  0,
);

console.log(sum); // 6

This is the basic understanding of a reduce() method in Javascript. If you want to learn more about it, please click here.

 

Leave a Comment