what is a Polyfill

Polyfills can be defined as the piece of code in JavaScript that generally provides some kind of modern functionality to older browsers that may lack the native support for that particular functionality by default. Polyfills act as the fallback mechanism for various functionalities that might not be supported by older browsers or even by the browsers that aren’t updated.

Need of Polyfill

To understand need for polyfill first we need to understand how JS engine works while executing the JS code. Lets suppose we have an array variable and we are using a method lets say forEach() now when the control will go to this functionality it’ll check whether or not the array variable has a functionality named forEach() in its __proto object, if the functionality is there it’ll use it and execute the code, else it’ll give an error. Here comes the role of polyfill, it checks if a particular functionality is present or not in prototype of the base class and if not present it appends the functionality in it so that the execution is not affected

Now let’s see a scenario to understand need of polyfill, let’s imagine we have a website and in it while using JS we’ve used Array.map() functionality somewhere. Now a client is accessing our website from a browser that’s not updated and doesn’t have support for let’s say Array.map() functionality , now client wont be able to access our website there might be some error because the browser doesn’t have support for a functionality. Polyfill acts as a backup here it will add the functionality if it’s not present by default.

Writing our own polyfills

We can write our own polyfills for any functionality that might not be supported by a browser so that our website is accessible from any browser in the world.

For writing our own polyfill we need to keep in mind:

• Check the signature of the functionality for which the polyfill is being designed.

  Signature means what kind of parameters are accepted by the functionality ,whether it returns anything or not and what is the output .

Bellow is an example of a basic polyfill and how it works:

//Polyfill for push method of Array class. We are using the name "mypush" for demonstration as push 
//method is available by default so we wont be able to implement a polyfill for it

if(!Array.prototype.mypush){            
    Array.prototype.mypush= function(...values){
        const initiallength = this.length;
        for (let i=0;i<values.length;i++) {
            this[initiallength+i]=values[i];
        }
        return this.length;
    }

}

Explanation:

if ( !Array.prototype.mypush )

This line basically means, we are checking if Array() class’s prototype object contains any method named mypush or not.

Array.prototype.mypush= function(...values){}

If the result of if condition is true then create a function named mypush in prototype object of Array class. The function accepts an array of values, here rest operator is used for the same.

const initiallength = this.length

We are creating a constant variable that will hold the initial length of the array with which we will be using the mypush function, this here refers to the array with which the mypush function will be used.

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

this[initiallength+i]=values[i];

}

This is basically the logic of how the mypush function will work and here it mimics the push() function and as we know push function accepts the values and adds them to the last of the array. Here also this refers to the array with which the the my push function would be used.

return this.length

As we know the push function also returns the new length of array after pushing the values in the array, so this line does the same.

Common Polyfills:

There are various common polyfills that every developer should know, they are :

For Array() base class:

• Array.map()

• Array.filter()

• Array.reduce()

• Array.forEach()

For Object() base class:

• Object.assign()

• Object.create()

• Object.defineProperties()

For Function() base class:

• Function.bind()

For Promise:

• promise

If this article helps you in any way please leave a like ❤️ and comment 💬.

Do comment what else can I improve in my future articles.

Thanks for reading 😊.