Who wouldn't desire cross-browser compatible web programmes that run smoothly in every online browser? But as JavaScript gains more and more new features, many outdated 💨 browsers no longer support all of them.

Polyfills is the solution to the problem.💫💥

What is a Polyfill?

A piece of code called polyfill is used to add support for more recent features in earlier browsers that don't already have native support for them.
For instance, let's pretend 💭 that as part of their language iteration, JavaScript releases a new function, let's say x. Now, this feature might not be supported by all older browsers. However, as developers, we would prefer that our apps function across all browsers. Using bespoke code, polyfills assist us in making this achievable.

Polyfill for map()

Syntax of Map-->array.map((num,i,arr)=>{})
Let's create our own map method called myMap

• myMap() takes in a parameter which a callback/function.
• It has a temp array that gets returned by the myMap function.
• The returned values from our 'callback' are pushed in the temp array.
• The this here would be the array that we will use this myMap function on. The traditional map() callback can take 3 arguments:-element, index and the source array. We have done the same.

//Creating custom Map
Array.prototype.myMap= function(callback){
    let temp=[];
    for(let i=0;i<this.length;i++)
    {
        temp.push(callback(this[i],i,this));
    }
    return temp;
};
//Performing map method through custom made map called myMap
const nums=[1,2,3,4];
const multiply=nums.myMap((x)=>{
    return x*2;
})
console.log(multiply);

Polyfill for filter()

Syntax of filter-->array.filter((num,i,arr)=>{})
Let's create our own filter method called myFilter

• myFilter() takes in a parameter which a callback/function.
• It has a temp array that gets returned at the end.
• The returned values from our callback are pushed in the temp array.
• The this here would be the array that we will use this myFilter function on.
• The traditional filter() callback can take 3 args. element, index and the source arr. We have done the same.

//Creating custom filter
Array.prototype.myFilter=function(callback){
    let temp=[];
    for(let i=0;i<this.length;i++)
    {
        if(callback(this[i],i,this))
            temp.push(this[i]);
    }
    return temp;
}
//Performing filter method through custom made filter called myFilter
const nums=[1,2,3,4];
const FilterOdd=nums.myFilter((x)=>{
   return x%2;
})
console.log(FilterOdd);

Polyfill for reduce()

Syntax of reduce-->array.reduce((num,i,arr)=>{})
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

It takes in two important parameters.
accumulater(acc)and initial_value
Lets create our own reduce() method called myReduce()

• myReduce() takes in a parameter which a callback/function.
• It returns a single reduced value.
• The returned values from our cb is assigned to the acc.
• The this here would be the array that we will use this myReduced function on.
• The traditional reduced() callback can take 4 args. accumulator, initial_value, index and the source arr. We have done the same.

//Creating custom reduce
Array.prototype.myReduce=function(callback,initial_value){
    var acc=initial_value;
    for(let i=0;i<this.length;i++)
    {
        acc=acc?callback(acc,this[i],i,this):this[i];
    }
    return acc;

}
//Performing reduce method through custom made reduce called myReduce
const nums=[1,2,3,4];
const sum=nums.myReduce((acc,curr,i,nums)=>{
   return acc+curr;
},0);
console.log(sum)

I am still learning Polyfills. Hope this blog gave you a decent introduction to what they are.
If you have any query let me know in the comment section. I'll try my best to answer them.
If you find this blog helpful, please ❤️ like it.
You can follow me if you wish to learn such amazing stuffs.