How to apply function against an accumulator and each key of object in JavaScript?

Front End Technology Javascript Web Development

In JavaScript, We can use the reduce() method to apply a function against an accumulator and each key of an object (from left to right).

The reduce() method is called on a given array and takes in a callback function as its first argument. Please refer to Array reduce() for more details. Let’s look at the syntax of this method.

Syntax

array array.reduce(callback[, initialValue]);

Parameters

callback − Function to execute on each value in the array.
initialValue − Object to use as the first argument to the first call of the callback.

The callback function is passed with four arguments

The first argument is the accumulator, which is the result of the previous callback function call, or the initial value if this is the first call.
The second argument is the current key being processed.
The third argument is the current value being processed.
The fourth argument is the current index being processed.

The reduce() method then returns the accumulator.

Applying reduce() Method

Let's take a look at a simple example to see how the reduce() method works.

We have an array of objects, each with a name and a value property. We use the reduce() method to sum up the values.

We can do that by passing in a callback function that takes in the accumulator (the result of the previous callback function call) and the current value being processed. The callback function then returns the accumulator plus the current value.

Example

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = arr.reduce((acc, cur) => acc + cur.value, 0);
      document.getElementById("result").innerHTML = sum;
   </script>
</body>
</html>

In the program above, we have an array of objects, each with a name and a value property. We use the reduce() method to sum up the values.

We pass in a callback function ((acc, cur) => acc + cur.value) that takes in the accumulator, acc (the result of the previous callback function call) and the current value, cur, being processed. The callback function then returns the accumulator plus the current value.

The reduce() method then returns the accumulator, which is the sum of all the values.

Advantages of using reduce()

One advantage of using reduce() is that it can make your code more readable.

For example, if we want to sum up the values in the array above, we could also use a for loop.

Example

<html>
<head>
   <title>Using for loop</title>
</head>
<body>
   <h2> Using for loop to sum the values of objects in an array</h2>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = 0;
      for (let i = 0; i < arr.length; i++) {
         sum += arr[i].value;
      }
      document.getElementById("result").innerHTML = sum
   </script>
</body>
</html>

Both the reduce() method and the for loop above achieve the same result. However, the reduce() method is more concise and easier to read.

Another advantage of using reduce() is that it can be used to process data in parallel.

For example, if we have an array of objects, each with a name and a value property, and we want to process each object in parallel, we could use the map() method.

let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let results = arr.map(obj => { // do something with obj });

However, if we want to process the data in sequence, we can use the reduce() method.

let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let result = arr.reduce((acc, obj) => { // do something with obj and return the result }, initialValue);

Conclusion

In this tutorial, we have seen how to use the reduce() method to apply a function against an accumulator and each key of an object. We have also seen some advantages of using reduce() over other methods.