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.
- A reducer function that is executed on each element of the array.
- Initial value of the accumulator.
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.
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.
Use case 1 : Reducing array to a single value
// 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
Use case 2 : Reducing array to an object
// 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}
Use case 3 : Reducing array to another array of same size
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]
Use case 4: Reducing array to another array based on some filters
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]
Use case 5: Reducing nested array to a flat array
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]
Top comments (0)