Need for Polyfills

Let you have an online Laddu shop and a user wants to buy your tasty laddus, he opened your website and when he clicked to buy laddus, an error displayed and when you tried to fix that error, then you found that there is no error in your computer, then how this is happening with the user.

Yes, this is possible due to difference of browser usage by different peoples and because java script is dependent too much on browser for lots of Functionalities, it is an very frequent and possible error that a developer must had to solve in their software’s code, And this problem is solved by Polyfills.

What is Polyfill

Polyfills are just like Medicine Kits, and as we can use them in emergency If we forgot to pick our medicines, similarly we can use Polyfills to run our software even if any function or method is not available in his browser. It looks like creating functions that generally browser have for situations in which that function is not available in browser like length function of array. Creating Polyfills feels like making your software independent from browser for lots of java script features and functionalities.

What is Prototype and Parent Array

But before we go more deep in Polyfills, let’s firstly understand, what is Prototype. Prototype is just the feature available in any created data, that stores all the browser defined functions or methods. And creating polyfill is just creating a method for the prototype which will work or executed when that method in not available in prototype by the browser. And more concept, we need to know that, there is a Class named like “Array” and his prototye stores all the values, properties and methods of that class, and when we create an array, then we are just copying all those prototype methods and values to that variable’s prototype.

Don’t be confused, we will use this after some time. So let’s see an example of a Polyfill.

Polyfills examples

‘toReversed’ Polyfill

So before we create polyfill of any method, we need to find what that method actually does(when that is available in browser), So let’s take the example of “toReversed” method of array:

here we can see that “toReversed” method is just taking the array and returning the array with all reversed elements indexes. So we can make it’s polyfill using different ways, like using “map” or “for loop” or “for.. of loop” etc.. But to understand, we will select the easiest way, which is using “for loop”. So here is “toReversed” method polyfill:

Here we firstly used an condition, that will check if that method is not available in browser, and if that method is not present, then we just used Array.prototype.toReversed to create that “toReversed” method inside the Parent Array’s(who’s methods are defined by browser, that I had explained above) prototypes and then we used a function, and then we taken the array in which this method will be used inside the “array” named variable using “this” keyword that will refer towards the array where this method is gonna to be used, and then we created an variable named “reversedArray” to store the reversed Array, and finally we used the for loop that will take elements from start to end but puts them in starting of the reversed array that is reversing the indexes of elements, and lastly we returned the “reversedArray” variable consisting the Reversed Array.

‘concat’ polyfill

Here we finally created the polyfill of “toReversed” method and to understand more, let’s create one more polyfill for “concat” method of String:

So let’s firstly Understand what it does:

here we can see that, concat is just taking strings and then just adds them and returns a concatenated string. So let’s create its polyfill:

---

I had Given my best, hope you understood about Polyfills. Meet you next time, till that, be Happy.