Polyfills

Creative Full Stack Web Developer with 3+ years of experience. Love open source and learning new things every day. Quick learner and believes in hard work
Search for a command to run...

Creative Full Stack Web Developer with 3+ years of experience. Love open source and learning new things every day. Quick learner and believes in hard work
No comments yet. Be the first to comment.
Ever used the search bar in Discord to find an old message? Maybe you searched "meeting link" in your work server. Or tried to find that meme someone shared 2 years ago. Or looked for a conversation with a friend from months back. That simple search ...

IT landscape is evolving faster than ever. Whether you're a seasoned professional or just starting your journey, staying ahead of the curve is crucial. Join me, Yatharth, a senior software engineer at a dynamic remote startup, as we explore the top 5...

Scaling is an important part of system design. Without scaling, no application can survive. In this blog, I will explain scaling with a real-world example, making it easy to understand, so everyone can learn the concept quickly. Let's consider an exa...

Team Members Yatharth Verma Description Introducing FormVibe - Create Beautiful Forms with Ease In the digital era, forms are a vital tool for gathering information and engaging with users. However, designing visually appealing and user-friendly fo...

Hi all, in this blog we are going to learn some differences between npm, yarn and pnpm. I guess everyone is aware of all these package managers. Let's first understand what exactly is package manager just in a brief. Package Manager Package manager l...

What are exactly polyfills?
New built in functions or new syntaxes in javascript, they might not work in outdated browsers. Some javascript engines might not be supporting them. To solve this problem, polyfills comes into the picture.
Pollyfill is like a code snippet that helps browser to support javascript new or native functions as well as new syntaxes to work properly.
Lets discuss a very simple example.
Lets say in some outdated browsers Array.filter function is not working. So lets create a polyfill of filter function which will work in all the browsers which does not support filter function
Example Code:
Array.prototype.filter = function (callbackFn) {
let outputArr = [];
this.forEach((el, index) => {
if (callbackFn(el, index, this)) {
outputArr.push(el);
}
});
return outputArr;
};
console.log([1, 2, 4, 5, 6, 7].filter((el) => el % 2 == 0));
So in the above example, I am creating a polyfill of filter function. I am replacing the filter function present in prototype of Array with my own polyfill function which is doing following:
In this way polyfill can be created.
Lets discuss one more example. Lets create a polyfill of map function
Example Code:
Array.prototype.map = function (callbackFn) {
let outputArr = [];
this.forEach((element, index) => {
outputArr.push(callbackFn(element, index, this));
});
return outputArr;
};
console.log([1, 2, 3, 4].map((e) => 10 * e));
Its almost similar to the first example. Only difference is we are not checking conditions. We are executing the callbackFn on every element and pushing the result of callback function in the new array that we will return.
So, I hope now you understand what are polyfills and how to create one. There are other examples of polyfill as well. For every existing function in javascript you can make a polyfill to make older or outdated browsers to support them.
Thank you all. Regards, Yatharth