Skip to content
Related Articles

Related Articles

What is a Polyfill ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 27 Mar, 2022

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!