.reduce(fn)

Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

Simple Examples:

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 10

let words = ['one', 'two', 'three'];
let concatenated = words.reduce((acc, curr) => acc + curr);
console.log(concatenated); // 'onetwothree'

Detailed Explanation:

Syntax

array.reduce((accumulator, currentValue, currentIndex, array) => {
// do something
}, initialValue)

• accumulator: The accumulated result from the previous call to the callback.
• 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 on which .reduce() was called.
• 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 the currentValue in the first iteration.

Example

Here is a simple example of using .reduce() to sum the elements of an array:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // Output: 10

Explanation

1. Initialization:

   • accumulator is initialized to 0 (the initialValue).
   • currentValue is set to the first element of the array (1).

2. First Iteration:

   • The callback function is called with accumulator = 0 and currentValue = 1.
   • The result (0 + 1) is returned and becomes the new value of accumulator.

3. Second Iteration:

   • The callback function is called with accumulator = 1 (from the previous iteration) and currentValue = 2.
   • The result (1 + 2) is returned and becomes the new value of accumulator.

4. Third Iteration:

   • The callback function is called with accumulator = 3 (from the previous iteration) and currentValue = 3.
   • The result (3 + 3) is returned and becomes the new value of accumulator.

5. Fourth Iteration:

   • The callback function is called with accumulator = 6 (from the previous iteration) and currentValue = 4.
   • The result (6 + 4) is returned and becomes the new value of accumulator.

6. Completion:

   • After all iterations are complete, the final value of accumulator (10) is returned as the result of the .reduce() method.

Using .reduce() without an Initial Value

If no initial value is provided, the first element of the array is used as the initial value of the accumulator, and the iteration starts from the second element:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});

console.log(sum); // Output: 10

In this case, accumulator starts with 1 (the first element of the array), and the iteration starts from the second element (2).

Practical Examples

• Finding the Maximum Value:

  const numbers = [1, 2, 3, 4, 5];
  const max = numbers.reduce((accumulator, currentValue) => {
    return Math.max(accumulator, currentValue);
  }, -Infinity);
  
  console.log(max); // Output: 5
  

• Flattening an Array of Arrays:

  const arrays = [[1, 2], [3, 4], [5, 6]];
  const flattened = arrays.reduce((accumulator, currentValue) => {
    return accumulator.concat(currentValue);
  }, []);
  
  console.log(flattened); // Output: [1, 2, 3, 4, 5, 6]