So your site crashed in different browser but working fine in your own. Probably its due to some function not found like splice map etc…

Its not your code problem, its due to the browser.

A Pollyfill or Pollyfiller is a piece of code that a programmer / developer expects the browser to provide natively.

• It was first introduced in HTML 5 ( just a fun fact )

• Currently all modern browsers support pretty mush every the methods, until you are using Internet Explorer, or ancient browser.

• In modern day site like RazerPay defines its pollyfillers. These Pollyfills are loaded before loading the rest content of the site to prevent crashing.

Starting from the start

• In JavaScript their is a property “ prototype “ with each data type. Its has some predefined functions. For Ex. in case of Array predefined function are: forEach, map, fill, find, pop, push etc.

• These function are stored in Datatype.prototype, and you can see it by console logging it. So when you use the function it first check if key is defined by the user. If it does not find it then it goes to the prototype to get the desired function.

• Whenever a datatype is declared, the value of prototype is copied to the value of __proto__

•       const arr = [1,2,3]     // declared
        // internally => arr.__proto__ = Array.prototype
  

Prototype: Collection of function for user defined by browser developers,

• Its not necessary that the flow or algorithm of the function will be same in different browser but the function and use will be the same.

• All things related to the function like working is defined by ECMAScript and all browser must follow it for uniformity.

Defining own function

• Defining function is easy, its just like adding a key in object. For ex:

•       Object.prototype.newFunction = function (){
            console.log("This is new method in Object");    
        }
        String.prototype.newFunction = function (){
            console.log("This is new method in String");    
        }
  

Creating Reverse function to Reverse the items in Array

• Its easier then you think.

• Since their is already a reverse function available with array we will name our reverse function as myReverse.

•       Array.prototype.myReverse = function (){
            // since "this" points to memory location (heap) 
            //we have to copy the array otherwise both will point to same address
            const prevArray = JSON.parse(JSON.stringify(this)) 
            for(let i = 0; i<prevArray.length; i++){
                this[i]=prevArray[prevArray.length - i - 1]
            }
  
            //little bit efficient
            // for(let i=0; i< this.length/2; i++){
            //     let value1 = this[i]
            //     let value2 = this[this.length - i - 1]
            //     this[i]=value2
            //     this[this.length - i - 1]=value1
            // }
        }
  
        let arr = [1,2,3,4, 5, 6, 7, 8, 9, 10, 11]
        arr.myReverse()
        console.log(arr)     //output [11, 10, 9, 8, 7, 6,  5, 4, 3, 2, 1 ]
  

Now, we know how to create our own function, we won’t be dependent on the developers of browsers.

Creating fallback for function when browser doesn’t support them.

• Approach: Check if function exists, if not then add your function, else leave.

•       if(! Array.prototype.findIndex){
            Array.prototype.findIndex = function (userFunction){
                for(let i=0; i<this.length; i++){
                    if (userFunction(this[i], i)) return i;
                }
            }
        }
  
        const arr=[1,2,3]
  
        console.log(arr.findIndex((e)=>e>2)); //output 2
  

• Polyfills are necessary because they provide modern functionality on older browsers that do not natively support it.

Summary:

Fallbacks are good you don’t have to depend on developer for the functionality of methods. Also enable you to have on-boarding customers / users from old browers.