Custom JavaScript Polyfills for Array Methods: filter, forEach, and map

What is a Polyfill?

A polyfill is a piece of code that adds functionality to older JavaScript environments (like microsoft edge browser) that do not support certain modern features. By writing polyfills, we can understand how built-in JavaScript methods work internally and improve our problem-solving skills.

If required, we can also add these custom polyfills to our script files or load it dynamically for our applications to run without interruption.

In case there is an error like “TypeError: yourArray.map is not a function”. It might be meaning, the browser doesn’t support the map method in the Array’s class prototype

1. filter() → myFilter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Implementation:

const numbers = [10, 12, 83, 34, 55, 6, 17, 18, 39];

if (!Array.prototype.myFilter) {
    Array.prototype.myFilter = function (callback) {
        const resultArray = [];
        for (let i = 0; i < this.length; i++) {
            callback(this[i]) && resultArray.push(this[i]);
        }
        return resultArray;
    };
}

const result = numbers.myFilter((val) => val % 3 === 0);
console.log(result); // Output: [12, 6, 18, 39]

How It Works?

• We extend Array.prototype with a method called myFilter.

• We iterate over the array, apply the callback function to each element, and push elements that satisfy the condition into resultArray.

• Finally, we return the filtered array.

---

2. forEach() → myForEach()

The forEach() method executes a provided function once for each array element.

Implementation:

const fruits = ['Kiwi', 'Mango', 'Litchi', 'Guava'];

if (!Array.prototype.myForEach) {
    Array.prototype.myForEach = function (callback) {
        for (let i = 0; i < this.length; i++) {
            callback(this[i], i);
        }
    };
}

fruits.myForEach((fruit, fruitIndex) =>
    console.log(`Index ${fruitIndex} has ${fruit}`)
);

How It Works?

• We create a myForEach method that takes a callback function.

• We iterate over the array and invoke the callback function for each element.

• Unlike filter(), forEach() does not return anything—it just executes the function for each element.

Output:

Index 0 has Kiwi
Index 1 has Mango
Index 2 has Litchi
Index 3 has Guava

---

3. map() → myMap()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Implementation:

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

if (!Array.prototype.myMap) {
    Array.prototype.myMap = function (callback) {
        const resultArray = [];
        for (let i = 0; i < this.length; i++) {
            const result = callback(this[i], i);
            resultArray.push(result);
        }
        return resultArray;
    };
}

const resultArray = myNums.myMap((value) => value + 1);
console.log(resultArray); // Output: [2, 3, 4, 5, 6]

How It Works?

• We define myMap() in Array.prototype.

• We iterate over the array, apply the callback function to each element, and store the result in resultArray.

• Finally, we return the new transformed array.

---

I will be adding more into this moving further …