The Superpowers of Array.reduce() Method

ECMAScript 5 introduced many awesome features in 2009, the majority of them being array methods like isArray, forEach, map, filter, every, some. But let’s talk about my favorite one: 

reduce

The

reduce

method

The 

reduce

reducer

reducer

The 

reducer

• Accumulator (acc)
• Current value (cur)
• Current index (idx)
• Source array (src)

Your 

reducer

Important: On each iteration, you must return the accumulator value for the next iteration (which will eventually be the final return value), or else the accumulator’s next (and ultimately final) value will be 

undefined

initialValue

The 

reduce

initialValue

initialValue

Examples

Summing numbers with/without an initial value

const numbers = [1, 2, 3];

// Without initialValue
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue
);

// Prints 6
console.log(sum);

// With initialValue
const initialValue = 3;
const sumWithInitialValue = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue
, initialValue);

// Prints 9
console.log(sumWithInitialValue);

Without the initial value, the first iteration will have 

accumulator

currentValue

Given the initial value, the first iteration will have an 

accumulator

currentValue

Counting the number of occurrences in an array

Let’s count the number of occurrences of words in the following and store the results in a map:

How much wood would a woodchuck chuck
If a woodchuck could chuck wood?
He would chuck, he would, as much as he could,
And chuck as much as a woodchuck would
If a woodchuck could chuck wood.

const sentence = "how much wood would a woodchuck chuck" +
  "if a woodchuck could chuck wood " +
  "he would chuck he would as much as he could " +
  "and chuck as much as a woodchuck would " +
  "if a woodchuck could chuck wood";

const words = sentence.split(" ");

const occurencesMap = words.reduce(
  (occurences, word) => {
    const numOfOccurences = (occurences.get(word) || 0) + 1;
    occurences.set(word, numOfOccurences);
    return occurences;
  }
, new Map());

const numOfWoodchucks = occurencesMap.get("woodchuck");

// 4
console.log(numOfWoodchucks);

We initialize an empty map and use it as the initial value of the accumulator, initializing or updating the number of occurrences of each word as we iterate over the words in the sentence.

These are only two examples, but by now you must have realized how awesome 

reduce

It allows you to take an array and reduce its values to basically anything that can be derived from the data it holds. It also allows you to return any type of data, regardless of the type of the elements of the array.

One Method to Rule Them All?

Revisiting other ES5 array methods, we can see that each method uses the given callback function on the array and returns some kind of result.

For example:

• map

   transforms each element of the array, returning a new array.

• every

   checks if the given condition applies to every element in the array, returning the corresponding Boolean value.

Looks familiar, right?

Using what we already know, let’s try to use 

reduce

Note: we’ll add the new methods to 

Array

this

map

The map() method creates a new array where each original element is transformed by the given 

transformer

Usage

const array = [1, 2, 3];
const doubled = array.map(num => num * 2);

// Prints [2, 4, 6]
console.log(doubled);

Using a transformer callback that doubles every number in the array, we get a new array where every element is twice its original value.

With 

reduce

map

Array.prototype.mapWithReduce = function(transformer) {
  return this.reduce((newArray, currentElement) => {
    const newElement = transformer(currentElement);
    newArray.push(newElement);
    return newArray;
  }, []);
}

const array = [1, 2, 3];
const doubled = array.mapWithReduce(num => num * 2);

// Prints [2, 4, 6]
console.log(doubled);

Using 

reduce

filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Usage

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenOnly = array.filter(num => num % 2 === 0);

// Prints [2, 4, 6, 8, 10]
console.log(evenOnly);

Using a test callback that filters out all odd numbers, we get a new array with all the even elements of the original array.

With 

reduce

Just like the previous example, filter also operates on an array and returns a new array, so the accumulator has to be an array.

Array.prototype.filterWithReduce = function(tester) {
  return this.reduce((newArray, currentElement) => {
    if (tester(currentElement)) {
      newArray.push(currentElement);
    };
    return newArray;
  }, []);
}

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenOnly = array.filterWithReduce(num => num % 2 === 0);

// Prints [2, 4, 6, 8, 10]
console.log(evenOnly);

Using 

reduce

every

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Usage

const array = [1, 2, 3, 4, 5];
const result = array.every(num => num < 10);

// Prints true
console.log(result);

Using a callback function that tests every element in the array, we get a boolean that indicates whether all elements pass the test. In this case, all elements are smaller than 10, and thus 

every

true

With 

reduce

every

Array.prototype.everyWithReduce = function(tester) {
  return this.reduce((acc, currentElement) =>
    acc && tester(currentElement)
  , true);
}

const array = [1, 2, 3, 4, 5];
const result = array.everyWithReduce(num => num < 10);

// Prints true
console.log(result);

Using 

reduce

true

&&

true

otherwise

Why start with 

true

If the array is empty, 

every

true

false

true

true

false

some

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

Usage

const array = [1, 2, 3, 4, 5];
const result = array.some(num => num > 3);

// Prints true
console.log(result);

Using a callback function that tests every element in the array, we get a boolean that indicates whether any element passes the test. In this case, the fourth element is larger than 3, and thus 

some

true

With 

reduce

some

Array.prototype.someWithReduce = function(tester) {
  return this.reduce((acc, currentElement) =>
    acc || tester(currentElement)
  , false);
}

const array = [1, 2, 3, 4, 5];
const result = array.someWithReduce(num => num > 3);

// Prints true
console.log(result);

Using 

reduce

false

||

true

false

Why start with 

false

If the array is empty, 

some

false

true

Else, if any element fulfills the condition, the chaining of the initial 

false

true

false

Disclaimer (every and some)

The 

every

false

every

false

Similarly, the 

some

true

some

true

However, there’s no pretty way to terminate 

reduce

every/some

reduce

O(n)

filter + map

Given an array of numbers, what is the most efficient way to filter out all even elements and square the remaining ones (using ES5 methods)?

Let’s try 

filter

map

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const tester = num => num % 2 === 1;
const transformer = num => num * num;

const result = array.filter(tester).map(transformer);

// Prints [1, 9, 25, 49, 81]
console.log(result);

We create a tester function that keeps only odd elements and a transformer function that squares the given elements. We then use these two callback functions when chaining the 

filter

map

Let’s use what we know about implementing 

filter

map

reduce

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const tester = num => num % 2 === 1;
const transformer = num => num * num;

const result = array.reduce((newArray, currentElement) => {
  if (tester(currentElement)) {
    const newElement = transformer(currentElement);
    newArray.push(newElement); 
  }
  return newArray;
}, []);

// Prints [1, 9, 25, 49, 81]
console.log(result);

We use the same tester and transformer functions to test if each element should be kept in the array and transform it if it should.

This approach saves us the need to create an intermediate array of filtered values, and we get a slightly more efficient algorithm as we don’t have to iterate over two different arrays (the original and the intermediate).

Conclusion

These were a few examples of how to use the powerful 

reduce

How do you use it in your day-to-day coding? Share in the comments!

Sources

• ES5 features by w3schools
• Javascript array methods by MDN web docs.
  Every method documentation in this article is taken from here.