Polyfills of array functions in javascript (popular js interview questions)

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

  1. forEach
  2. map
  3. filter
  4. reduce
  5. every
  6. some
  7. indexOf
  8. includes
  9. find
  10. findIndex

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 

mapforEach
Map returns a new arrayforEach returns undefined
We can chain methods to map like .filter, .reduce, etc since it returns a new arrayWe cannot chain methods here as it returns undefined
It does not mutate the arrayThe callback function that we pass to forEach mutates the array
Difference between map and forEach

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 🙂

Leave a Comment