Introduction

Javascript, the Dynamic language which powers the web, is constantly evolving. While this evolution brings exciting new features, it can also create compatibility issues, older browsers might not support the latest Javascript features, leading to broken functionality and a frustrating user experience. This is where polyfills come to the rescue.

What is a Polyfill?

A polyfill is a piece of Javascript code that provides modern functionality in older browser environments which don’t natively support it. Think of it like a “Filling in the gaps” mechanism. It replicates a new feature's behaviour so your code can run smoothly across different browsers, ensuring a consistent user experience.

Why use polyfills?

The primary reason for using polyfill is to avoid situations where your web application or website doesn’t work on older browsers due to a lack of support.

Future-proofing code: Using polyfill, you can start modern Javascript features today. knowing that your code will continue to work even as browsers evolve.

Let us now create our polyfills.

We will start will forEach () function/method used in the iteration of the array.

ForEach() function/method Array instance executes a provided function once for each array element.

// Fist we will name the method myForEach, second we will check if the method exist in the array, 
// If it doesnt then only we can create it
if(!Array.prototype.myForEach) {
Array.prototype.myForEach = function(callback) {
 for(let i = 0; i < this.length; i++) { // we are using for iterating over the array and then 
            callback(this[i], i); // for each element the callback , which we have passed here as an argument
        }                         // callback function is called with two arguments
}
}
// now lets demonstrate it
const arr1 = [1, 2, 3, 4 , 5];
arr1.myForEach((e) => {
console.log(e)
}); // this will print each element in the array in the console.

The second polyfill we will have a look at is the map() function/method, instances create a new array populated with the results of calling a provided function on every element in the calling array.

// myMap method creation
// again we will check if it exists, if it doesnt then we will create a myMap()
if(!Array.prototype.myMap) {
Array.prototype.myMap = function(userFunction) {
const resultArray = []; //initialising an empty array
         // this points to an exisiting context
for(let i=0; i < this.length; i++) {
// now we will push the userFunction with two arguments which are index and the element of the array 
// by using this
resultArray.push(userFunction(i, this[i]);
}
return resultArray[] // returnning the new array 
}
};

// testing this myArray polyfill
const arr1 = [1, 2, 3, 4 , 5];
const newArr = arr.myMap((e) => e ** 2);
// 
console.log(newArr) // => the output will be [1, 4, 6, 8, 10]

The third polyfill we will create is the filter method in Javascript.

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

// lets create our own filter method
if(!Array.prototype.myFilter) {
Array.prototype.myFilter = function(userFunction) {
// initializing an new array
const resultArray = [];
// now we will again use a for loop to iterate
for(let i=0; i < this.length /* currentArray length */; i++) {
// The loop will iterate with each element in the array;
if(userFunction(this[i]) {
resultArray.push(this[i)
// element in the array, the function userFunction (which is a callback function passed to myFilter) is called with the current element (this[i]). If userFunction returns true, the element is added to the res array.
}
}
return resultArray;
}
}

// now  check the myFilterFunction
const arr1 = [1, 2, 3, 4 , 5];
const newFilter = arr1.myFilter(e => e %2===0);
console.log(newFilter); // output will be 2 and 4 , as it is divisble by 2 and the remainder is 0.

Conclusion

Polyfills are an essential tool for JavaScript developers who want to build modern, feature-rich web applications that work seamlessly across all browsers. By understanding how polyfills work and how to use them effectively, you can write cleaner, more efficient code while ensuring a consistent and enjoyable user experience for everyone.