In this section, we will learn what the reduce() method is and how to use it in JavaScript.
JavaScript Arrays reduce() Method
Sometimes we have an array and want to run an operation on all the elements to get one final result at the end. For example, let’s say we want to sum all the elements of an array together or subtract them or even run multiplication or division, etc. on those elements. Basically, those operations that need all the elements of an array and at the end return one final result; this is where we can use the reduce() method.
The reduce() method iterates over the entire elements in an array and builds up one final value that is ultimately returned as the final result.
Notes:
- The method does not change the original array.
- This method does not execute on an empty array.
Array reduce() Syntax:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Array reduce() Method Parameters:
The method takes two arguments:
- The first argument is a function of calling on each item.
- The second argument is an optional initial value upon which the reduction starts with.
The function that we pass to the `reduce()` method takes 4 arguments:
- The first argument is the previous value returned from calling the function.
- The second argument is the current element taken from the target array.
- The third argument is the index number of the current element.
- The fourth argument is a reference to the target array.
Note: on the first iteration (the first call to the function that we pass to the `reduce()` method), if the initial value is set in the `reduce()` method (as the second argument), it will be used as the first argument to the function. Otherwise, if there’s no initial value, the first argument to the function is the first item in the array and the second argument is the second item of the array.
Array reduce() Method Return Value:
The reduce() method iterates over the entire elements in an array and builds up one final value that is ultimately returned as the final result.
Example: using Array reduce() method in JavaScript
const arr = [1,2,3,4,5];
function eve(total, currentValue,currentIndex ,arr){
console.log(`The total value is: ${total} and the currentValue is: ${currentValue}`);
return total + currentValue;
}
const final = arr.reduce(eve,10);
console.log(final);
Output:
The total value is: 10 and the currentValue is: 1 The total value is: 11 and the currentValue is: 2 The total value is: 13 and the currentValue is: 3 The total value is: 16 and the currentValue is: 4 The total value is: 20 and the currentValue is: 5 25
Here, the initial value is 10 and so, in the first call to the reference function, the first argument (`total`) will be 10.
Example: sum of array
const arr = [1,2,3,4,5];
function eve(total, currentValue,currentIndex ,arr){
console.log(`The total value is: ${total} and the currentValue is: ${currentValue}`);
return total + currentValue;
}
const final = arr.reduce(eve);
console.log(final);
Output:
The total value is: 1 and the currentValue is: 2 The total value is: 3 and the currentValue is: 3 The total value is: 6 and the currentValue is: 4 The total value is: 10 and the currentValue is: 5 15
Here because there’s no-initial value, the first time the `eve()` function is invoked, the first argument (`total`) is basically the first element in the array and the `currentValue` becomes the second element in the array.
