Polyfill

A polyfill (or polyfiller) is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

Polyfills are used to address issues where browsers implement the same features in different ways. The polyfill uses non-standard features in a certain browser to give JavaScript a standards-complaint way to access the feature.

Although this reason for polyfilling is very rare today, it was especially prevalent back in the days of IE6, Netscape, and NNav where each browser implemented Javascript very differently.

A good general rule is this:

If it’s new syntax, you can probably transpile it

If it’s a new object or method, you can probably polyfill it

Array.filter()

First of all, let's understand how the .filter() works.

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

Syntax

filter(function callbackFn(element, index, array){ ... })

Polyfill Implementaion

Let's see how we can implement our own polyfill for .filter()

So, first of all, we need an array on which we can use the .filter()

const arr = [3, 5, 8, 2, 10, 33];

Now that we have an array, we can check what methods we can use to manipulate or make some operations to the array. To check that we need to console.log(arr)

We will get this result in the image below

As we can see, along with other methods, filter() is also present, so the next step is to put our own filter function inside the Array prototype.

This is how we add our own function to the Array prototype.

// Array.prototype.<our_function_name>
Array.prototype.myFilter = function(){};

Let's see the results in the console now.

So, now we have added our myFilter() in the array prototype. Let's now work on the logic.

const arr = [3, 5, 8, 2, 10, 33];
if (!Array.prototype.myFilter) {
  Array.prototype.myFilter = function(callback) {
    const newArr = [];
    for (var i = 0; i < this.length; i++) {
      const res = callback(this[i], i, this);
      if (res) {
        newArr.push(this[i])
      }
    }
    return newArr;
  }
}

Let's understand,

The above lines of code are just regular JavaScript which is needed for the browser to understand if the browser does not have native support for the specific feature filter()

Furthermore, if (!Array.prototype.myFilter) is used to prevent overwriting of the browser’s native myFilter() method. If the feature is not present then the polyfill fills the hole in the browser’s feature set.

callback callback here is the callback function which actual .myFilter() accepts
this is the context or the array that we are working on. Here the arr[]
this[i] is the current element of the array with the specified index
i is the index of the array
.call() It can be used to invoke (call) a method with an owner object as an argument (parameter).

In Action

const lessThan10 = arr.myFilter(num => num < 10);
console.log(lessThan10); // [ 3, 5, 8, 2 ]

Conclusion

I have only implemented a simple polyfill for the filter(). Haven't implemented the edge cases though. But the point here is creating a browser fallback for the filter().

Hope you liked it.

Soubhagya Mishra