20
Understanding array reduce in Javascript
As a developer, transforming data from one form to another is a pretty common use case. In Javascript, we can make use of the reduce function that is part of every array to transform the data as per our needs.
The reduce method will need at least two parameters.
The value that is returned by the reducer function is assigned to the accumulator. This value is remembered across each iteration in the array, finally resulting in the output.
Lets say we have an array of numbers and we want to add them all up. Here is how the reducer function will look. The first argument to the reducer function will be the accumulator. The second argument is the current item in the array we are iterating over, which we want to transform and integrate into the accumulator. Inside the reducer function, after we do our desired transformation of the data, we are going to return our new accumulator.
Since here we are adding the items of the array, we are going to add the current array item with the accumulated value so far and return it, which will then become the new accumulator value.
Since here we are adding the items of the array, we are going to add the current array item with the accumulated value so far and return it, which will then become the new accumulator value.
As the elements of the array are iterated over, the accumulator value for the current array item will be the return value of the reducer function from the previous array item. So we have to provide some value for the accumulator for the first array item. This is the second parameter we pass to the reduce function. If we do not pass any value, the first array item becomes the initial value of the accumulator by default.
// Reducing an array to calculate the sum of the array
const items = [1,5,2,7,4,8];
const reducer = (accumulator, item) => {
return accumulator + item;
}
const initialAccumulatorValue = 0;
const result= items.reduce(reducer,initialAccumulatorValue);
console.log(result) // 27// Reducing an array to count the number of even and odd numbers in the array
const items = [1,6,4,3,9,16,31]
const reducer = (accumulator, item) => {
if(item % 2 === 0) return {...accumulator, evenNumbers: accumulator.evenNumbers+1};
return {...accumulator, oddNumbers : accumulator.oddNumbers +1};
}
const initialAccumulatorValue = { evenNumbers: 0 , oddNumbers : 0 };
const result = items.reduce(reducer,initialAccumulatorValue);
console.log(result) // {evenNumbers: 3, oddNumbers: 4}This use case is very common, that there is an in-built array function
map, that is provided.// Multiplying every item in the array by 2
const items = [1,5,2,7,4,8];
const reducer = (accumulator, item) => {
return [...accumulator, item*2];
}
const initialAccumulatorValue = [];
const result = items.reduce(reducer,initialAccumulatorValue);
console.log(result) // [2, 10, 4, 14, 8, 16]This use case is very common, that there is an in-built array function
filter, that is provided.// Filtering array to contain only even numbers
const items = [1,5,2,7,4,8];
const reducer = (accumulator, item) => {
if(item % 2 === 0) return [...accumulator, item];
return accumulator;
}
const initialAccumulatorValue = [];
const result = items.reduce(reducer,initialAccumulatorValue);
console.log(result) // [2, 4, 8]const items = [[1,2,3],[4,5,6],[7,8,9]]
const reducer = (accumulator, item) => {
return [...accumulator,...item];
}
const initialAccumulatorValue = [];
const result = items.reduce(reducer,initialAccumulatorValue);
console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8, 9]