So, how about we start with a fun story. I rolled out a feature in one of my previous organizations. It looked awesome. I couldn’t wait to receive all the praises and appreciations but instead was bombarded with bugs and issues. Well, I tested the feature on chrome but little did I know that the users used IE and safari. This is where polyfills in javascript step in.
One of the bugs was caused because indexOf function is not implemented in IE. What would you do here? Raise a ticket on IE’s support page or implement it on your own. Of course, the better approach would be implementing it yourself. These implementations are nothing but polyfills.
Before we get into why polyfills lets understand what are polyfills
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.
Why polyfills? the js community keeps adding new methods in js, so all browsers may not support this. In this case, you need to implement these on your own so that your code runs on every browser.
Interviews mainly focus on your fundamentals. Hence making polyfills the most common question in javascript interviews. I faced them a lot and have now assembled all those questions here. In this post, we will focus only on the polyfills of array functions. We’ll look into other polyfills in later articles. The functions that we’ll look into are
- forEach
- map
- filter
- reduce
- every
- some
- indexOf
- includes
- find
- findIndex
Table of Contents
forEach
Definition
This method executes the callback function passed into it for every element in the array
Example
Polyfill implementation
map
Definition
This function returns a new array by calling the callback function on every element of the array
Example
Polyfill implementation
Another very important interview question is the difference between map and forEach. Let’s look into this
| map | forEach |
| Map returns a new array | forEach returns undefined |
| We can chain methods to map like .filter, .reduce, etc since it returns a new array | We cannot chain methods here as it returns undefined |
| It does not mutate the array | The callback function that we pass to forEach mutates the array |
There are some other differences as well that you can read here.
I would recommend you to read You Don’t Know JS by Kyle Simpson to learn more about javascript
filter
Definition
It returns an array with all the elements that satisfy the condition passed into the callback function
Example
Polyfill implementation
reduce
Definition
Reduce returns a single value by calling the “reducer” a callback function on every element of the array. The second argument is the initialValue. The reducer takes in the previous(value resulting from the previous call to the callback function. If initialValue is specified then in the first call previous is the initialValue) and current value.
Example
Polyfill implementation
every
Definition
Returns true if all the elements of the array satisfy the condition in the callback, else returns false
Example
Polyfill implementation
some
Definition
Returns true if at least one element of the array satisfies the condition in the callback, else returns false
Example
Polyfill implementation
indexOf
Definition
indexOf returns the index of the first occurrence of the passed element. If the element is not found it returns -1. The second argument is the start position from where to start the search. Also, Internet Explorer does not implement indexOf. So if you are using this method in your code, use the polyfill for Internet Explorer
Example
Polyfill implementation
includes
Definition
Returns true if the element is present in the array, else returns false. The second argument is the start position from where to start the search.
Example
Polyfill implementation
find
Definition
find function returns the first element in the array which satisfies the condition in the callback. If no element satisfies the condition then it returns undefined.
Example
Polyfill implementation
findIndex
Definition
findIndex function returns the index of the first element in the array which satisfies the condition in the callback. If no element satisfies the condition then it returns undefined.
Example
Polyfill implementation
That’s All, Folks!
The most important polyfills in javascript are forEach, map and reduce so make sure you prepare them well. I hope you learned something new from this article. If you think I missed something please make sure to leave a comment below. Also do read about the event loop and various queues that node uses here. Be well prepared for your interviews and all the best 🙂