Array.reduce() Method

#webdev #javascript #beginners #programming

What is Reduce Method?

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Syntax

Here's the syntax for using reduce():

const reducedValue = arr.reduce(
    (accumulator, currentValue, currentIndex, array) => {
        // Return the new value of the accumulator
    },
    initialValue
);

The callback function is called for each element in the array and takes the following arguments:

accumulator: the accumulator accumulates the callback's return values. It is the accumulated value previously returned in the last invocation of the callback, or initialValue, if supplied (see below).
currentValue: the current element being processed in the array.
currentIndex (optional): the index of the current element being processed in the array.
array (optional): the array reduce() was called upon.
initialValue (optional): a value to use as the first argument to the first call of the callback. If no initial value is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentValue. Calling reduce() on an empty array without an initial value will throw a TypeError.

The reduce() method calls the callback function once for each element present in the array, excluding holes in the array, and it persists the return value of the callback function. The first time the callback is called, the accumulator and currentValue can be one of two values. If initialValue is provided in the call to reduce(), then accumulator will be equal to initialValue and currentValue will be equal to the first value in the array. If no initialValue was provided, then accumulator will be equal to the first value in the array and currentValue will be equal to the second.

Here's an example of how to use reduce() to sum all the numbers in an array:

const numbers = [1, 2, 3];

const sum = numbers.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum); // prints 6

In the example above, the callback function is an anonymous function that takes two arguments, accumulator and currentValue, and returns the sum of the two values. The reduce() method calls this function for each element in the numbers array. The first time the callback is called, accumulator is equal to 0 and currentValue is equal to 1. The second time the callback is called, accumulator is equal to the return value of the first call to the callback, which is 1, and currentValue is equal to 2. The reduce() method continues calling the callback function until all the elements in the array have been processed. The return value of the reduce() method is equal to the return value of the last call to the callback function.

You can also use an arrow function as the callback function, like this:

const numbers = [1, 2, 3];

const sum = numbers.reduce(
    (accumulator, currentValue) => accumulator + currentValue,
    0
);

console.log(sum); // prints 6

The reduce() method can also be used to flatten an array of arrays into a single array. Here's an example:

const flattened = [
    [0, 1],
    [2, 3],
    [4, 5],
].reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);

console.log(flattened); 
// prints [0, 1, 2, 3, 4, 5]

Examples

Count the students who passed

const students = [
    { name: "John", score: 6.4 },
    { name: "Maria", score: 8.2 },
    { name: "Peter", score: 9.8 },
    { name: "Ann", score: 9.2 },
];

const passed = students.reduce((acc, curr) => {
    if (curr.score >= 7) {
        acc++;
    }
    return acc;
}, 0);

console.log(passed); // prints 3

Grouping objects

const students = [
    { name: "John", score: 6.4 },
    { name: "Maria", score: 8.2 },
    { name: "Peter", score: 9.8 },
    { name: "Ann", score: 9.2 },
];

const groupByScore = students.reduce((acc, curr) => {
    const key = Math.floor(curr.score);
    if (!acc[key]) {
        acc[key] = [];
    }
    acc[key].push(curr);
    return acc;
}, {});

console.log(groupByScore);
// prints
// {
//   6: [
//     { name: 'John', score: 6.4 }
//   ],
//   8: [
//     { name: 'Maria', score: 8.2 }
//   ],
//   9: [
//     { name: 'Peter', score: 9.8 },
//     { name: 'Ann', score: 9.2 }
//   ]
// }

Reduce Right

The reduceRight() method works exactly like reduce(), except it applies the callback function from right to left.

Here's an example of how to use reduceRight() to sum all the numbers in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum = numbers.reduceRight(function (accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum); // prints 55

Reduce vs. For Loop

The reduce() method is often used to replace a for loop. Here's an example of how to use a for loop to sum all the numbers in an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let sum = 0;

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log(sum); // prints 55