What is a Polyfill ?

Polyfill is a way to modify or add new functions. It is basically a piece of code to add/modify the new functions. It is used to provide modern functionality to web browsers.

• It is basically a piece of code to provide modern functionality to web browsers.
• It is used to add/modify new functionalities.

It’s like browser fallback what if your browser doesn’t provide the map( ) function then you will need to code your own map( ) function. We will discuss polyfills for the following methods:

• Using map( )
• Using forEach( )
• Using reduce( )

We will code our own map( ), forEach( ) and reduce( ) function. These are all higher-order function which is defined inside Array.prototype so that they are accessible to all the array declared.

For creating our own polyfill we need to declare them inside the Array.prototype.

1. Polyfill for map( ) function

Example: We have been given the array and we need to multiply each element by two.

Javascript

const arr = [1, 2, 3, 4, 5];

function callback(ele) {
    return ele * 2;
}

Array.prototype.myMap = function (callback) {
    const myArr = [];
    for (const i in this) {
        myArr.push(callback(this[i]));
    }
    return myArr;
};

const newArr = arr.myMap(callback);
for (i in newArr) {
    console.log(newArr[i]);
}

Output:

2
4
6
8
10

2. Polyfill for forEach( ) function

Example: Creating our own function like forEach( ) function in JavaScript.

Javascript

const arr = [1, 2, 3, 4, 5];

function myFunction(ele) {
    console.log(ele);
}

Array.prototype.myForEach = function (callback) {
    for (const i in this) {
        callback(this[i]);
    }
};

arr.myForEach(myFunction);

Output:

1
2
3
4
5

3. Polyfill for reduce( ) function

Example: Find the sum of all the even numbers inside the given array.

Javascript

const arr = [1, 2, 3, 4, 5, 6];

function callback(ele) {
    if (ele % 2 == 0) {
        return true;
    }

    return false;
}

Array.prototype.myReduce = function (callback, sum) {
    for (const i in this) {
        if (callback(this[i])) {
            sum += this[i];
        }
    }
    return sum;
};

const sum = arr.myReduce(callback, 0);
console.log(sum);

Output:

12

Reference: https://developer.mozilla.org/en-US/docs/Glossary/Polyfill