Polyfills in JavaScript 🔧⚙
Tags: programming, javascript, webdev
Published: 2022-01-14 18:05:19

Who doesn't want their web apps to perform flawlessly across all web browsers i.e be **cross-browser compatible**! But with more and more new features coming to JavaScript, many old browsers now do not have support for all of them.❗💀

**Polyfills** is the solution to the problem.🌈✨

##Prerequisites
- Basic JavaScript (if, else, for-loops, etc.)
- `this` keyword
- Prototype (can read from this <a href="https://www.javascripttutorial.net/javascript-prototype/" target="__blank">link</a>)
- Higher order functions e.x `map()`, `filter()`, `reduce()`
- Will to learn 🚀

## What is a Polyfill?
**Polyfill** is a piece of code that is used to bring support for newer features in older browsers that currently do not have native support for these features.
For example, suppose JavaScript releases a new function, say `x` as a part of their language iteration. Now some older browsers might not have support for this function. But we developers would want our apps to be cross-browser compatible. Polyfills help us in making this possible with custom code.👨‍💻

>Note📝- To code the polyfill for any feature, one must first be aware of the internal workings and specifications of the same.⚙

## Polyfill Demo 🚀

Enough talk, we need some code now.🤓👨‍💻

For the sake of this blog we would be coding polyfills of three higher-order functions which were added to JavaScript as a part of ES5, namely `map()`, `filter()` and `reduce()`.

❌ **Disclaimer** - By no means should this be considered a guide to using the aforementioned higher-order functions.

That being said, take a look at the following image for a refresher of these functions if you're feeling a bit rusty.

 
![Higher Order Functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8twv4je0nn21kgli4fia.jpg)

## Polyfill for Map
>_The `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array - MDN Web Docs_

Let's look at the following code. The code here is for -
- computing squares of numbers of a given array
- alternate casing of characters of a string (if the index is even , the character should be in uppercase else lowercase, e.x. `polyfill` => `PoLyFiLl`)

![Map code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld3ttde02vnr2wogghwl.png)

Now, the fun part🌈!!
Let's code the basic polyfill i.e our custom implementation for the `map` function.

Take a look at the following code.

![Basic map polyfill](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se9s45ewexdd2ir7wjsv.png)

👉Steps to code the polyfill for `map` - 
- Have a clear understanding of how `map()` works
- Create a function, which here we have named `customMap` and attach it to `Array.prototype`
- Pass a function as an argument that would be run over every element (this resembles the `callback` in `map`)
- Create a new array that is initially empty
- Loop over every element of the array using `this` and push every new element to the new array
- Finally return the output array
- Voila!! 🎉🎉 You're ready with your first polyfill!!

Let's put our `customMap` to the test.🚀🚀


![Polyfill map use](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdykg3iuye4l8nk6acfq.png)

Our polyfill passed the test i.e it yields the same results as the original `map` function.✅✅

Next, let's move to the `filter` function.

## Polyfill for Filter
>_The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. - MDN Web Docs_

Let's look at the following code. The code here is for - 
- filtering out all odd numbers from a given array of numbers


![Filter code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggjhw56imrkj0gj2u4q0.png)

Now, time to code the basic polyfill for the `filter` function.🌈

Look at the following code for better understanding.

![Basic Filter polyfill](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0gntzar4nmdvm6u5q9a.png)

👉Steps to code our `filter` polyfill - 
- Have a clear understanding of `filter()` and how it works
- Create a function, which here we have named `customFilter` and attach it to `Array.prototype`
- Pass a function as an argument that would be run for each element 
- Create a new empty array to store the filtered items
- Loop over the array items using `this` and push only those items to the new array which satisfy the test
- Finally return the output array containing filtered items
- Superb!!🎉🎉 You have coded your `filter` polyfill!

Similar to the above, let's put our `customFilter` to the test.😅


![Filter polyfill run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32lt62lwp8vaddcn53po.png)

Our polyfill for `filter` yields the same result as using the inbuilt `filter` function!!✅✅

We've almost reached the end of the blog.🏁 Next, we would quickly cover the `reduce` function.

## Polyfill for Reduce
>_The `reduce()` method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value. - MDN Web Docs_

Let's look at the code below. The code here -
- computes the sum of all elements of an array

![Reduce code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp0c4whcvm1pke2ygt9i.png)

Let's try and write the basic polyfill for `reduce` function. 

**✔Recommended** - First try on your own and then proceed to the code below.

![Polyfill for reduce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/griiun46mvz9a6ibqmpb.png)

Let's try testing whether our polyfill code works or not!

![Reduce polyfill run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwy94ikqfkom4an6erx1.png)

Awesome!! 🎉🎉 This also yields the same result as before.

If you made it this far, pat your back. You're awesome!🌈🚀

## Bonus🦄 - History of Polyfill
The name Polyfill comes from the name of a product used to cover cracks and holes on a wall, called _Polyfilla_. The term was coined by Remy Sharp while writing his book "Introducing HTML5" back in 2009. 

📕Can read more about this - <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="__blank">here</a>

## Conclusion
**Congratulations!!** 🎉🎉 You made it till the end. If you're still here chances are you probably liked the blog. 

I am still learning Polyfills. Hope this blog gave you a decent introduction to what they are.

Do let me know how you liked the blog and where I need to improve. Would be eagerly waiting for feedback!🙂