JavaScript Basics

JavaScript Advanced

JavaScript Arrays

JavaScript Functions

JavaScript Objects

JavaScript DOM

JavaScript String

What is the array reduce() method in JavaScript?

JavaScript array reduce() method is different from other iteration methods; in fact, the reduce() method reduces an array to a single value.

The reduce() method does not modify the existing array and returns one and only one value. It is used to find the sum of array elements, determine the maximum and minimum value in an array, and flatten the array.

Prior to the reduce() method, for loop is used to perform the tasks, which are now performed by the reduce() method. Suppose you want to calculate the sum of all the elements of an array; then, with the help of a for loop, you loop through all the elements and add them to get the total sum.

let numbers = [10, 11, 12, 13, 14];
let total = 0;
for(let i=0; i<numbers.length; i++){
  total += numbers[i];
}
console.log(`The sum of array elements: ${total}`);

Output

The sum of array elements: 60

How to use the array reduce() method in JavaScript?

Before you start using the reduce() method, you must understand the two terms introduced by the reduce() method, reducer and accumulator. The reduce() method accepts two arguments, the callback function and the initial value.

const value = array.reduce(callback, initialValue);

The callback function is called a reducer. It has the following form:

function reducer(accumulator, currentValue, currentIndex, array){
  //return a value
}

It is recommended that you use the arrow function as the callback function.

const reducer = (accumulator, currentValue, currentIndex, array)=>{
  //return a value
}

The accumulator is the value returned by the reduce() method when the reduce() function has finished processing the array.

The reducer function is called for each element of the array, and the current processing element is passed to it. It is compulsory to return a value in each execution. The returned value is assigned to the accumulator. In the final execution of the callback function, the accumulator's value is returned by the reduce() method.

The initialValue argument is optional. Suppose you pass a value to the initialValue argument. In that case, the reduce() method will assign that value to the accumulator during the first call of the reducer function. On the other hand, if you don't pass the initialValue argument, the reduce() method will assign the value of the first element of the array to the accumulator.

initialValue argument accumulator currentValue currentIndex
The value is passed to the initialValue argument. The value of the accumulator is equal to the initialValue argument, i.e. accumulator=initialValue array[0] 0
The value is not passed to the initialValue argument. The value of the accumulator is equal to the first element of the array, i.e. accumulator=array[0] array[1] 1

Let's find the sum of array elements using the reduce() method.

let numbers = [10, 11, 12, 13, 14];
let total = numbers.reduce((acc, curr)=>{
  return acc + curr;
}, 0);
console.log(`The sum of array elements: ${total}`);

When 0 is passed to the initialValue argument. The reduce() method will execute in the following way:

accumulator currentValue currentIndex returned value
1st Iteration 0 10 0 10
2nd Iteration 10 11 1 21
3rd Iteration 21 12 2 33
4th Iteration 33 13 3 46
5th Iteration 46 14 4 60
let numbers = [10, 11, 12, 13, 14];
let total = numbers.reduce((acc, curr)=>{
  return acc + curr;
});
console.log(`The sum of array elements: ${total}`);

When nothing is passed to the initialValue argument. The reduce() method will execute in the following way:

accumulator currentValue currentIndex returned value
1st Iteration 10 11 1 21
2nd Iteration 21 12 2 33
3rd Iteration 33 13 3 46
4th Iteration 46 14 4 60

How to find the maximum value in an array using the reduce() method?

With the help of reduce() method, let's find the maximum value in an array.

let numbers = [4, -4, 10, 203, 53, 11];
let maximumValue = numbers.reduce((acc, curr)=>{
  if(acc>=curr){
    return acc;
  }else{
    return curr;
  }
}, 0);
console.log(`The maximum value in an array: ${maximumValue}`);

Output

The maximum value in an array: 203

How to find the minimum value in an array using the reduce() method?

With the help of reduce() method, let's find the minimum value in an array.

let numbers = [4, -4, 10, 203, 53, 11];
let minimumValue = numbers.reduce((acc, curr)=>{
  if(acc<=curr){
    return acc;
  }else{
    return curr;
  }
}, 0);
console.log(`The minimum value in an array: ${minimumValue}`);

Output

The minimum value in an array: -4

Recommended Posts