JavaScript Arrays : Understanding the reduce function

Posted on by

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. Starts from the second element in the array ie. arr[1], when the initial value argument is not passed. If the initial value argument is passed then current value starts from the 1st element in the array arr[0].
  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 (On 1st loop, accumulator is arr[0], then it is the returned value of the previous loop): ${accumulator}`);
    console.log(`currentValue (Loops through the array, starting at arr[1]): ${currentValue}`);
    console.log(`currentIndex: ${currentIndex}`);
    console.log(`array: ${array}`);
    console.log('---');
    return accumulator + currentValue;
  }
);

Output

accumulator (On 1st loop, accumulator is arr[0], then it is the returned value of the previous loop): 1
currentValue (Loops through the array, starting at arr[1]): 2
currentIndex: 1
array: 1,2,3,4,5
---
accumulator (On 1st loop, accumulator is arr[0], then it is the returned value of the previous loop): 3
currentValue (Loops through the array, starting at arr[1]): 3
currentIndex: 2
array: 1,2,3,4,5
---
accumulator (On 1st loop, accumulator is arr[0], then it is the returned value of the previous loop): 6
currentValue (Loops through the array, starting at arr[1]): 4
currentIndex: 3
array: 1,2,3,4,5
---
accumulator (On 1st loop, accumulator is arr[0], then it is the returned value of the previous loop): 10
currentValue (Loops through the array, starting at arr[1]): 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 loop.

Note that the current value on the 1st loop now starts at the first element of the array

Working Example

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

  arr.reduce(
  (accumulator, currentValue, currentIndex, array) => {
    console.log(`accumulator ( On the 1st loop, this is the initial value, then the returned value of the previous loop): ${accumulator}`);
    console.log(`currentValue (Loops through the array, starting at arr[0]): ${currentValue}`);
    console.log(`currentIndex: ${currentIndex}`);
    console.log(`array: ${array}`);
    console.log('---');
    return accumulator + currentValue;
  }, 0
);

Output

accumulator ( On the 1st loop, this is the initial value, then the returned value of the previous loop): 0
currentValue (Loops through the array, starting at arr[0]): 1
currentIndex: 0
array: 1,2,3,4,5
---
accumulator ( On the 1st loop, this is the initial value, then the returned value of the previous loop): 1
currentValue (Loops through the array, starting at arr[0]): 2
currentIndex: 1
array: 1,2,3,4,5
---
accumulator ( On the 1st loop, this is the initial value, then the returned value of the previous loop): 3
currentValue (Loops through the array, starting at arr[0]): 3
currentIndex: 2
array: 1,2,3,4,5
---
accumulator ( On the 1st loop, this is the initial value, then the returned value of the previous loop): 6
currentValue (Loops through the array, starting at arr[0]): 4
currentIndex: 3
array: 1,2,3,4,5
---
accumulator ( On the 1st loop, this is the initial value, then the returned value of the previous loop): 10
currentValue (Loops through the array, starting at arr[0]): 5
currentIndex: 4
array: 1,2,3,4,5
---