Implement polyfill for Array.prototype.reduce() method in JavaScript

In this article, we will learn how to implement a polyfill for an Array.prototype.reduce() method in JavaScript.

A polyfill is a piece of computer code written to implement a feature in a browser that does not yet support it. It could be because of the older version of the browser you are using, or the new version of the browser does not have that feature. 

We will discuss the reduce() method supported by arrays in JavaScript, and implement our own version of it as well. The reduce() method calls a callback function, called a reducer function, on every element of the array one-by-one, and returns a single value as an output. 

Example: 

Javascript

<script>
    const arr = [1, 2, 3, 4];

    // Find sum of array elements
    // using reduce method
    const sum = arr.reduce((total, num) => total + num);

    console.log(sum);
</script>

Output:

10

Array.prototype.reduce(): Let us create our own simple polyfill for the reduce() method.

Example:

• We created a “myReduce” prototype method to work in the same way as the reduce() method
• The myReduce() method takes 2 arguments, a callback function, and an initialValue.
• We run a loop across all the array elements.
• We check if the initialValue exists, if it exists, we call the callback function on the accumulator and the array element, and store the result in the accumulator, else we initialize the accumulator with the array element.
• We return the accumulator as the final result.

Javascript

<script>
    Array.prototype.myReduce = function (callback, initialValue) {

        // Variable that accumulates the result
        // after performing operation one-by-one
        // on the array elements
        let accumulator = initialValue;

        for (let i = 0; i < this.length; i++) {

            // If the initialValue exists, we call
            // the callback function on the existing
            // element and store in accumulator
            if (accumulator) {
                accumulator = callback.call(undefined,
                    accumulator, this[i], i, this);

                // If initialValue does not exist,
                // we assign accumulator to the
                // current element of the array
            }
            else {
                accumulator = this[i];
            }
        }

        // We return the overall accumulated response
        return accumulator;
    }

    // Code to calculate sum of array elements
    // using our own reduce method
    const arr = [1, 2, 3, 4];
    console.log(arr.myReduce((total, elem) => total + elem));

    // Code to calculate multiplication of all array elements
    console.log(arr.myReduce((prod, elem) => prod * elem));
</script>

Output: 

10
24