JavaScript : Iterate over an array and accumulate:reduce()

The reduce() method in JavaScript is used to iterate over an array and accumulate a single value based on the elements of the array. It executes a provided function once for each array element, resulting in a single output value. The syntax for reduce() is as follows:

array.reduce(callback(accumulator, currentValue, index, array), initialValue)

Here’s a breakdown of the parameters:

• callback: A function that is executed on each element of the array, taking in four arguments: accumulator, currentValue, index, and array.
• accumulator: The accumulator accumulates the callback’s return values. It is the accumulated result of the previous iterations.
• currentValue: The current element being processed in the array.
• index (optional): The index of the current element being processed.
• array (optional): The array reduce() was called upon.
• initialValue (optional): An initial value for the accumulator. If not provided, the first element of the array will be used as the initial accumulator value.

Example 1: Summing Array Elements

Consider an array of numbers representing sales figures. We can use reduce() to calculate the total sales:

const sales = [100, 200, 300, 400];
const totalSales = sales.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(totalSales); // Output: 1000

In this example, the reduce() method iterates over each element in the sales array, adding each value to the accumulator. The initial value of the accumulator is set to 0. Once use case of JavaScript Array Method reduce()

Example 2: Flattening an Array

The reduce() method can also be used to flatten arrays. Let’s flatten a multidimensional array:

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

Here, the concat() method is used to merge the subarrays into a single array, which becomes the accumulator. This is the second use case of JavaScript Array Method reduce()

Example 3: Grouping Objects by a Property

Suppose we have an array of objects representing products, and we want to group them by their category:

const products = [
  { id: 1, name: 'Laptop', category: 'Electronics' },
  { id: 2, name: 'T-shirt', category: 'Fashion' },
  { id: 3, name: 'Headphones', category: 'Electronics' },
  { id: 4, name: 'Jeans', category: 'Fashion' }
];

const groupedProducts = products.reduce((accumulator, currentValue) => {
  (accumulator[currentValue.category] = accumulator[currentValue.category] || []).push(currentValue);
  return accumulator;
}, {});

console.log(groupedProducts);

In this example, the reduce() method accumulates objects into a new object groupedProducts, where each category serves as a key, and the corresponding products are stored in arrays as values. This is the third use case of JavaScript Array Method reduce()

The reduce() method in JavaScript is a powerful tool for array manipulation, offering flexibility and efficiency in processing array elements. By understanding its functionality and exploring practical examples, developers can leverage reduce() to streamline their code and handle complex array operations effectively. Experiment with reduce() in your projects to unlock its full potential in array processing.

Get more articles on Java Script

Read more on Shell and Linux related articles

Refer more on python here : Python

Official