Home

Reducer Function- more than just adding items in array

Published: 20/08/2020

My first impression of reduce was as name implies that it will implement some function on an array and the final output will be reduced to a single value.
But later I discovered that It can do more than that. The skeleton of the reduce function can be defined as it has one variable(accumulator) and a function in which it will iterate to each element of the array starting from the first and updating the accumulator value before moving to every next element in an array.
The interesting thing comes into play when the inner function is executed and updating the accumulator as it will determine the kind of output that this reduce function will produce and that’s where it is very useful

The below are some of the useful cases that i came across and that can be achieved using the reducer method



1- Adding all elements of an array

That’s the simplest form of reduce function and it will be useful when we need to get the total of all the array elements.

   
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10



2- Multiplying all the elements of an array

That’s also similar to addition as the only thing we adding here is the multiplication operator

   
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator * currentValue;
	
// 1 * 2 * 3 * 4
console.log(array1.reduce(reducer));
// expected output: 24



3- Average of all the numbers in an array

This is similar to add all the elements of an array and then divide it with the length of the array to get the average of all the elements of an array.

   
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array1.reduce(reduce,0)/arr.length);
// expected output is 2.5




4- Addition multiplication and average in one function

That’s also similar to addition as the only thing we adding here is the multiplication operator

   
let array1=[1,2,3,4];
 
let addMultiplyAverageArrayValues = function (accumulator, currentvalue, index) {
if (index === array1.length - 1) {
    accumulator.average = accumulator.average + currentvalue;
    Average = accumulator.average / array1.length;
  } else {
    Average = accumulator.average + currentvalue;
  }
  let endresult = {
    sum: accumulator.sum + currentvalue,
    product: accumulator.product * currentvalue,
    average: Average,
  };
  return endresult;
};

console.log( array1.reduce(addMultiplyAverageArrayValues,{sum:0,product:1,average:0}))





5- Flexibility of having different type of Accumulator and elements

we have flexibility of having accumulator and elements of an array of different type, like array can be numbers and accumulator can be strings.

   
const array1 = [1, 2, 3, 4];

function Evenodd(acc, element) {
  if (element % 2 == 0) return `${acc}is even \n`;
  else if (element % 3 == 0 && element % 2 != 0) {
    return `${acc}is odd \n`;
  } else if (element == 1) {
    return `${acc}is odd \n`;
  }
}

console.log(array1.reduce(Evenodd, "hello"));