Polyfills… Polyfills… Polyfills…(Part 1)

During my latest rounds of Interviews I have been asked to write Polyfills on multiple occasions, so in this post I will be explaining the “Commonly asked Polyfills for Frontend Interviews”.

Let me begin by saying what are Polyfills fills and why they are needed.

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. For example, a polyfill could be used to mimic the functionality of a Array.flat in IE7 using stack or recursion, or whatever else you require as Array.flat is not natively supported by IE7.

Now, that you know what polyfills are, let me begin by writing the commonly asked Array Polyfills in JavaScript.

Array.map

Before writing a polyfill, you need to understand how, the function works.

In case of Array.map

1. It takes a callback function which is executed for every element of the array and a thisArg(optional).
2. The callback function has 3 arguments — Element, index, and the array itself.
3. Map returns a new array and does not modify the original array.

Based on this information, we can create a polyfill customMap.

1. The Polyfill should be attached to the Prototype, so that it can be accessed as an array property.
2. this inside the function points to the array on which customMap is being called.

Similarly, we can write rest Array polyfills.

Array.reduce (Most Asked)

1. Reduce takes two arguments, the callback function and initialValue(optional)
2. The callback function takes 4 arguments, the accumulator which is the result of computation on previous values, the currentValue , index and arrays are optional.
3. Reduce has many uses, like sum of all elements in array or from interview perspective it can be used as a Pipe function as well
4. Similarly, you can be asked to write polyfill of reduceRight.

Array.filter

1. It is similar to Array.map, only difference being only elements with satisfies the callback function will be pushed to the array.
2. The length of the filtered array will always be less than or equal to the original array.
3. The elements of the filtered array is not modified.
4. Array.find is similar to filter, instead of pushing the element, it needed to return the element which satisfies the callback condition.

Array.flat (Also frequently asked)

1. Here the array is flattened with the dependency passed to it, by default the array will be flattened up to one level.
2. Here, recursion is used to solve this problem, but it can also be solved using a stack or generator function.
3. Similarly, Array.flatMap could be asked in interviews.

That’s all commonly asked Array polyfills, for the Promise polyfills please visit Part 2 (Highly Important for interviews)

As a bonus, I’ll also share one more very frequently asked one (Asked me in Tekion, Practo & Paytm)

Bind

1. Bind is used for function borrowing, it returns a new function which can be called at a later time.
2. To write a customBind function you need to attach it to the Function prototype as Bind is part of function prototype.
3. The difference between bind and call or apply is that call and apply are called when they are being invoked, but bind returns a function which can be invoked at a later time.
4. Interviewer can ask you to directly write a polyfill of bind, or they can present you with a scenario where you need to use bind function, for example in setTimeout (asked me in Rippling) if you are asked to call a function with “this” keyword present, then you need to bind it or else it will return undefined.
5. If you are familiar with React, it is widely used there as well.

That’s all folks……

For Part 2 refer — https://medium.com/@souravsaha101/polyfills-polyfills-polyfills-part-2-419f88b23f8f

Follow me on LinkedIn at https://www.linkedin.com/in/sourav-saha-66b37b92/