In this article we will understand what is the exact meaning of polyfill and also will cover how to approach the polyfill question in interview and will implement the code with dry run . Let dive into it ! 🚀

Why Polyfill ?

Suppose you are developing your own website where you are using some array methods, such as the filter method. Now, what if a user accesses your website using a browser that does not support this method natively? Since you cannot predict which browsers will support certain features, this could lead to compatibility issues.

To prevent such problems, companies create their own versions of these methods, known as polyfills. These custom implementations ensure that if a built-in method is unavailable or unsupported, the polyfill seamlessly takes over, allowing the code to execute without errors. This approach helps maintain functionality across different browsers and ensures a smooth user experience.

What is Polyfills ?

Now that you understand why polyfills are necessary, here’s the MDN definition to help you in interviews:

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

Lets Implement Polyfills for some popular Array Methods

Before implementing a polyfill, break it down into the following steps:

✅ Read the method signature (What is expected? Kya nature hai uska?)
✅ Understand the input (What type of data does it accept?)
✅ Check the parameters (How many parameters does it take? What are they?)
✅ Define the output (What should the function return?)
✅ Determine the return type (Does it return an array, object, boolean, etc.?)
✅ Check if it’s iterable (Does it work with loops or higher-order functions?)

map()

map() method returns a new array where each element is the result of applying a callback function to every element of the original array.

To create a polyfill for map method first we need to break it down to the points which defines the core logic of map method

• Read Signature : New Array return | input - userFn ( its a callback function)

• Iterate over the array

• the callback function contains value and the index of the elements

Now that we understand what is required of us Lets Code it

if(!Array.prototype.myMap){
    Array.prototype.myMap = function(userfn){
        const newArray = [];
        const currentArray = this // yeh jis context mein hota usko point krta hai
        for(let i = 0;i<currentArray.length;i++){
           newArray.push(userfn(currentArray[i],i));
        }
        return newArray;
    }
}

const testMap = [1,4,5,6,7];
const giveMultiples  = testMap.myMap((e)=>e*2);
console.log("Custom Map: ",giveMultiples)

To create a polyfill method Array.prototype.<method-name> is used where we define our function

• now inside that function we create a new Array as we noted in the signature that it returns new array

• so we have created a new array so after that we have created a const variable that store this which referes to current context which is array in this case

• then we simply run a for loop pushing the userfn with value and index

• and finally return the new array

simple right 😁 don’t worry let understand with a small dry run

This is how we create a polyfill for the map method. Try to understand the flow, and apologies for my handwriting! 😅

Here is the other methods that is widely asked in interview:

1️⃣ map ✔
2️⃣ reduce
3️⃣ filter
4️⃣ forEach
5️⃣ some
6️⃣ find
7️⃣ fill
8️⃣ flat
9️⃣ flatMap
🔟 includes
1️⃣1️⃣ at
1️⃣2️⃣ indexOf
1️⃣3️⃣ push
1️⃣4️⃣ pop
1️⃣5️⃣ unshift
1️⃣6️⃣ shift

Try to create it on your own, and if you face any difficulties, I've got you covered! I've created a repository where you can find solutions for these polyfills. 🚀

Here is the link : https://github.com/srvjha/polyfills

Conclusion

Now that you’ve understood how polyfills work, how to break them down step by step, and how to implement them and i have also demonstrated you with a dry run, Now the more you code, the better you'll grasp the logic behind these methods.

If you found this helpful, feel free to like ❤ and share your thoughts.🚀