Javascript

Comprehensive Guide: Implementing Polyfills for Array.map(), Array.filter(), and Array.reduce() Methods

Polyfills are used to add functionality to older browsers that do not natively support certain JavaScript methods. In this blog, we provide polyfills for three array methods: `Array.map`, `Array.filter`, and `Array.reduce`. Let's go through each of them and see how they work.

Date Posted : 07 October 23

Time to read: 5 mins

---

What are Polyfills ?

Polyfills are used to add functionality to older browsers that do not natively support certain JavaScript methods. In this case, we provide polyfills for three array methods: Array.map, Array.filter, and Array.reduce. Let’s go through each of them and explain how they work.

Polyfill for Array.map

The polyfill for Array.map checks if the method already exists. If it doesn’t, it adds the map function to the Array.prototype, allowing any array in the code to have access to the map method.

Inside the polyfill implementation, we iterate over each element of the array using a for loop. For each element, we apply the provided callback function to it using the callback.call(thisArg, this[i], i, this) syntax. The thisArg parameter allows us to specify the value of this inside the callback function.

The result of each callback invocation is pushed into a new array called newArr. Finally, we return the newArr, which contains the results of applying the callback to each element of the original array.

if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    var newArr = [];
    for (var i = 0; i < this.length; i++) {
      newArr.push(callback.call(thisArg, this[i], i, this));
    }

    return newArr;
  };
}

Polyfill for Array.filter

The polyfill for Array.filter follows a similar pattern as the Array.map polyfill. It checks if the method is already defined and adds it to Array.prototype if it’s not.

Inside the polyfill implementation, we iterate over each element of the array using a for loop. For each element, we apply the provided callback function to it using the callback.call(thisArg, this[i], i, this) syntax. If the callback returns true, indicating that the element passes the test, we push it into a new array called newArr.

Finally, we return the newArr, which contains only the elements that passed the callback’s test.

if (!Array.prototype.filter) {
  Array.prototype.filter = function(callback, thisArg) {
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    var newArr = [];
    for (var i = 0; i < this.length; i++) {
      if (callback.call(thisArg, this[i], i, this)) {
        newArr.push(this[i]);
      }
    }

    return newArr;
  };
}

Polyfill for Array.reduce

In this example, we initialize an accumulator variable with the initialValue parameter. If no initialValue is provided, we use the first element of the array as the initial value.

We then iterate over the elements of the array using a for loop. The accumulator value is updated in each iteration by invoking the callback function with the current accumulator, the current element, the index, and the entire array as arguments. The updated accumulator value is stored back in the accumulator variable.

Finally, we return the accumulator, which holds the accumulated value after iterating through all the elements of the array.

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback, initialValue) {
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    var accumulator = initialValue !== undefined ? initialValue : this[0];

    for (var i = initialValue !== undefined ? 0 : 1; i < this.length; i++) {
      accumulator = callback.call(undefined, accumulator, this[i], i, this);
    }

    return accumulator;
  };
}

Conclusion

In conclusion, polyfills are crucial for adding missing functionality to older browsers. With the polyfills provided for Array.map, Array.filter, and Array.reduce, you can seamlessly use these array methods across different browsers. Incorporating these polyfills improves compatibility and code reusability, ensuring a smooth user experience without the need for browser-specific workarounds.

Shivaraj Bakale

Diving deep from frontend waves to the backend caves 🌊🤠

React

Redux

Redux-saga

HTML

Reach Out