JavaScript ES6 – Array reduce method

JavaScript array reduce() is a method that exists on the Array.prototype and was introduced in ECMAScript and is supported in all modern browsers.

JavaScript array reduce() method is commonly used for performing math expressions and equations, for instance calculating the total of a numbers array.

Think of JavaScript array reduce() method as: “I want to reduce my array to just a single value”

array reduce() parameters

JavaScript array reduce() method consists of following parameters:

  • prev – accumulates the callback’s value that returned on next iteration as prev
  • next – current element also called as value
  • index – the element index, not common to use
  • initialValue – an optional initial value for the loop to begin with, the initialValue then gets passed to prev on first iteration.

Let’s see how we can use reduce() method with examples:

        
          let arr = [2, 9, 6, 8, 23];
let sum = arr.reduce((prev, next) => {
  return prev + next;
});
console.log(sum);

// OUTPUT
// 48        
      

In above example we are simply performing an addition operation return prev + next on all array elements. adding 2 +9 + 6 + 8 + 23 = 48, simple to understand so far. But let’s see what is actually happening here?

how reduce() method actually works?

Let’s see another example and analyze what is happening?

        
          let arr = [2, 9, 6, 8, 23];

const sum = arr.reduce((prev, next) => {
  console.log(`prev: ${prev}`, `next: ${next}`);
  return prev + next;
}, 0);

console.log('sum:', sum);

// OUTPUT
// prev: 0 next: 2
// prev: 2 next: 9
// prev: 11 next: 6
// prev: 17 next: 8
// prev: 25 next: 23
// sum: 48        
      

Notice in above example we passed initialValue parameter as zero(0), In this case when reduce() begins on first iteration the prev = 0 and next = 2.

If there was no initialValue passed to reduce() method then prev would be 2 (first array value) and next would be 9 (second array value).

Let’s see another example without initialValue parameter, to fully grasp how reduce method works?

        
          let arr = [2, 9, 6, 8, 23];

const sum = arr.reduce((prev, next) => {
  console.log(`prev: ${prev}`, `next: ${next}`);
  return prev + next;
});

console.log('sum:', sum)

// OUTPUT
// prev: 2 next: 9
// prev: 11 next: 6
// prev: 17 next: 8
// prev: 25 next: 23
// sum: 48        
      

Notice in this example the initialValue parameter was not passed. As result prev = 2 and next = 9 unlike the first example where initialValue was zero and prev = 0 on first array iteration.

Let’s see one last example, this time we set initialValue to something bigger than zero.

        
          let arr = [2, 9, 6, 8, 23];

const sum = arr.reduce((prev, next) => {
  console.log(`prev: ${prev}`, `next: ${next}`);
  return prev + next;
}, 5);

console.log('sum:', sum)

// OUTPUT
// prev: 5 next: 2
// prev: 7 next: 9
// prev: 16 next: 6
// prev: 22 next: 8
// prev: 30 next: 23
// sum: 53        
      

Notice this time we passed initialValue as 5, as result this time prev = 5 and our calculation result is different now sum = 53.

These small differences in how reduce() behaves with and without an initialValue likely also contributes to reasons to not fully understanding reduce(). Hopefully it all make sense now.

array reduce() shorthand syntax

Since we are using JavaScript arrow function we can use shorthand syntax for JavaScript array reduce() method:

        
          let arr = [2, 9, 6, 8, 23];
const sum = arr.reduce((prev, next) => prev + next);
console.log(sum)

// OUTPUT
// 48        
      

array reduce() usage and tips

Here are few tips you need to know when considering using JavaScript array reduce() method:

  • Don’t forget to specify an initialValue when dealing with an array of object
  • Don’t forget to return values, otherwise it will be undefined
  • Values that evaluated as false will be skipped
  • Array empty slots are skipped
%d bloggers like this: