JavaScript Arrays : Understanding the reduce function

Syntax

arr.reduce(callbackFunction, [initialValue])

What does reduce do?

Reduce is a function that loops through an array.

Operations can be performed on the array via a callback function.

At the end of the operations on the array, reduce returns a single value

Reduce can be used, for example, to total a shopping cart

Example

  let arr = [1,2,3,4,5];
  arr.reduce( (accumulator, currentValue, currentIndex, array) => { 
      //some operations;
      return something;
  });

 

The Callback Function

The callback function is invoked for each element in the array, passing in 4 arguments which are passed in by the reduce function.

These 4 arguments then can be used in our callback function.

Takes four arguments

  1. accumulator – The first element of the array on the first loop or initial value if supplied. Then the returned value of the previous loop.
  2. currentValue – The current element in the array.
  3. currentIndex – The index of the current element.
  4. array – The whole array.

Working Example

  let arr = [1,2,3,4,5];

  arr.reduce(
    (accumulator, currentValue, currentIndex, array) => {
        console.log(`accumulator ( 1st run is arr[0] then returned value of previous run): ${accumulator}`);
        console.log(`currentValue: ${currentValue}`);
        console.log(`currentIndex: ${currentIndex}`);
        console.log(`array: ${array}`);
        console.log('---');
        return accumulator + currentValue;
    }
  );

Output

  accumulator ( 1st run is arr[0] then returned value of previous run): 3
  currentValue: 1
  currentIndex: 0
  array: 1,2,3,4,5
  ---
  accumulator ( 1st run is arr[0] then returned value of previous run): 4
  currentValue: 2
  currentIndex: 1
  array: 1,2,3,4,5
  ---
  accumulator ( 1st run is arr[0] then returned value of previous run): 6
  currentValue: 3
  currentIndex: 2
  array: 1,2,3,4,5
  ---
  accumulator ( 1st run is arr[0] then returned value of previous run): 9
  currentValue: 4
  currentIndex: 3
  array: 1,2,3,4,5
  ---
  accumulator ( 1st run is arr[0] then returned value of previous run): 13
  currentValue: 5
  currentIndex: 4
  array: 1,2,3,4,5
  ---

 

Providing the initial value

Specifying the second parameter (initialValue) in the reduce function will cause initialValue to be passed in as the accumulator argument on the first run

Working Example

  let arr = [1,2,3,4,5];

  arr.reduce(
    (accumulator, currentValue, currentIndex, array) => {
        console.log(`accumulator ( 1st run is arr[0] then returned value of previous run): ${accumulator}`);
        console.log(`currentValue: ${currentValue}`);
        console.log(`currentIndex: ${currentIndex}`);
        console.log(`array: ${array}`);
        console.log('---');
        return accumulator + currentValue;
    }, 8
  );

Output

  accumulator ( 1st run is arr[0] then returned value of previous run): 8
  currentValue: 1
  currentIndex: 0
  array: 1,2,3,4,5
  ---
  accumulator ( 1st run is arr[0] then returned value of previous run): 9
  currentValue: 2
  currentIndex: 1
  array: 1,2,3,4,5
  ---
  accumulator ( 1st run is arr[0] then returned value of previous run): 11
  currentValue: 3
  currentIndex: 2
  array: 1,2,3,4,5
  ---
  accumulator ( 1st run is arr[0] then returned value of previous run): 14
  currentValue: 4
  currentIndex: 3
  array: 1,2,3,4,5
  ---
  accumulator ( 1st run is arr[0] then returned value of previous run): 18
  currentValue: 5
  currentIndex: 4
  array: 1,2,3,4,5
  ---