Javascript reduce() method:

This is one of the very dynamic and important method, which is widely used, so you need to learn it and practice it to sharpen your javascript.
Javascripts' array method reduce() can reduce an array to a single value by invoking a callback function on each element of the array. It loops through the array and accumulates a single value using the logic specified in the callback function.

As an example, consider the syntax for the reduce() function: 

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);


callback: A function that is known as a callback is triggered for each array element. It takes maximum 4 arguments:

accumulator: The total value computed in the previous iteration or, if given, the initialValue.

currentValue: The array's currently-processed element.

currentIndex: The index of the currently being processed element.

array: The array on which reduce() was called (optional).

initialValue (optional): A starting point that serves as the value for the initial accumulator. If nothing is specified, the starting value of the accumulator is taken from the first element of the array, and the iteration begins with the second element.

Here is an illustration of how to use the reduce() function: 

// sum of all the elements in array
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // Output: 15


In this example, the reduce() function is called on the numbers array. The callback function (accumulator, currentValue) => accumulator + currentValue adds each element to the accumulator, which starts with an initial value of 1. The final result, sum, is 15, which is the accumulated sum of all the elements in the array.

Popular examples of reduce() method:


The fastest way to understand reduce() method os to practice examples using this method. Some of the examples are:

find the maximum or minimum number in an array:
const numbers = [1, 2, 3, 4, 5];
const maxNumber = numbers.reduce((max, current) => Math.max(max, current));
console.log(maxNumber); // Output: 5


In this example, the reduce() function is used to find the maximum number in the array. The callback function (max, current) => Math.max(max, current) compares each element with the current maximum value and returns the greater of the two.

Math.max() is a javascript method to find maximum of 2 values. e.g Math.max(5, 2) gives 5. 

const numbers = [1, 2, 3, 4, 5];
const minNumber = numbers.reduce((min, current) => Math.min(min, current));
console.log(minNumber); // Output: 1


In this example, the reduce() function is used to find the minimum number in the array. The callback function (min, current) => Math.min(min, current) compares each element with the current minimum value and returns the minimum of the two.

Math.min() is a javascript method to find minimum of 2 values. e.g Math.min(5, 2) gives 2.

Concatenate all the elements in an array into a single value:
const words = ['Hello', 'World', 'JavaScript'];
const concatenatedString = words.reduce((result, current) => result + ' ' + current);
console.log(concatenatedString); // Output: 'Hello World JavaScript'


In this example, the reduce() function is used to concatenate all the strings in the array. The callback function (result, current) => result + ' ' + current appends/joins each word to the existing result, with a space in between.

Flattening an Array of Arrays:
const nestedArr = [[1, 2], [3, 4], [5, 6]];

const flattenedArray = nestedArr.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]


In this example, the reduce() method is used to flatten a nested array structure. The accumulator (accumulator) starts with an empty array ([]), and in each iteration, it concatenates the current array (currentValue) to the flattened array.

Counting the Occurrences of Elements:
const names = ['John', 'Jane', 'John', 'Mary', 'Jane'];

const countOccurrences = names.reduce((accumulator, currentValue) => {
  accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
  return accumulator;
}, {});
console.log(countOccurrences);
// Output: { John: 2, Jane: 2, Mary: 1 }


This is one of the very important examples, even asked many times in interview also.

In this example, the reduce() method is used to count the occurrences of each element in the array. The accumulator (accumulator) starts with an empty object ({}), and in each iteration, it increments the count of the current element (currentValue) by accessing it as a property of the accumulator object.

PrevNext