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 link)
- 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.
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
)
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.
π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 toArray.prototype
- Pass a function as an argument that would be run over every element (this resembles the
callback
inmap
) - 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.ππ
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
Now, time to code the basic polyfill for the filter
function.π
Look at the following code for better understanding.
π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 toArray.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.π
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
Let's try and write the basic polyfill for reduce
function.
βRecommended - First try on your own and then proceed to the code below.
Let's try testing whether our polyfill code works or not!
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 - here
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!π
Top comments (1)
thanks to Polyfill, I understand how ES6 such as
map()
,reduce()
works indeed.