Polyfill: reduce()

Easy ImportantPayPal

Prompt

Imagine the JavaScript array method .reduce() does not exist. Your task is to create a polyfill for it. Your function should mimic .reduce(), accepting an array, a reducer function, and an optional initial value as parameters. Implement in JavaScript and briefly describe your strategy.

Playground

Hint 1

Consider what the native reduce function does. It executes a reducer function on each element of the array, resulting in a single output value. How can you replicate this behavior of accumulating a result from an array's elements?

Hint 2

Think about how to add a new method to Array.prototype. This method should take a callback (the reducer function) and an optional initial value.

Hint 3

Your method should iterate over each element of the array, applying the callback to accumulate a result. Consider how you can use a loop to process each element and update the accumulated value.

Solution

Explanation

The reduce method is arguably the most versatile and powerful of all array methods in JavaScript. While methods like map and filter have specific purposes, reduce is like a Swiss Army knife that can accomplish almost any array transformation task.

Let's dig into how our myReduce polyfill works:

Our function starts by adding a method to the Array.prototype called myReduce. This function accepts two parameters: a callback function and an optional initial value:

Array.prototype.myReduce = function (
  callback,
  initialValue
) {
  // Implementation here
};

First, we do a safety check to ensure the callback is actually a function:

if (typeof callback !== 'function') {
  throw new Error(`${callback} is not a function`);
}

Next comes the real magic of reduce. We iterate through each element in the array, and for each one, we call the callback function with two key arguments:

  1. The accumulated value so far (starting with the initialValue)
  2. The current element from the array
for (const element of this) {
  initialValue = callback(initialValue, element);
}

With each iteration, the result of the callback becomes the new accumulated value for the next iteration. This creates a "snowball effect" where the accumulated value grows or transforms as we process each element.

Finally, once we've processed all elements, we return the final accumulated value:

return initialValue;

What makes reduce special is its incredible flexibility. While methods like map always produce an array of the same length as the original, and filter always produces an array of the same or fewer elements, reduce can produce literally any type of output: a number, a string, an object, an array, or any other data type.

Here are some common use cases for reduce:

  1. Summing or multiplying all numbers in an array
  2. Building an object from an array of data
  3. Flattening nested arrays into a single array
  4. Counting occurrences of values in an array
  5. Grouping or pivoting data based on some property

The key to mastering reduce is understanding that it's all about accumulation - each element contributes to a running result that evolves with each step. The initialValue parameter is crucial because it defines both the starting point and often the type of the final result.

Common Pitfalls

  • Forgetting the Initial Value: While the initialValue parameter is technically optional, omitting it can lead to unexpected behavior, especially with empty arrays or when you need a specific data type for the result.

  • Misunderstanding the Accumulator: Remember that each iteration's callback result becomes the accumulator for the next iteration. Forgetting to return a value from your callback will result in the accumulator becoming undefined.

  • Overcomplicating Problems: While reduce can solve complex problems, sometimes a combination of simpler methods like map and filter can be more readable.

  • Using Mutating Operations: Like other array methods, it's best practice to keep your reducer pure by not mutating the original array or the accumulator directly.

00:00

Table of Contents