Abhishek Raj

Posted on Aug 14, 2021

JS Polyfills asked in Interviews

#javascript #node #career #webdev

Introduction

As Javascript community keeps adding new methods in Javascript, so all browsers doesn't support new JS methods.

To make your JS code run on every browser, you need to add it on your own or you can use Babel, CoreJS. Sometimes companies ask in interview for Polyfills to know your understanding.

In this article, I will list out some Polyfills asked by companies.

1. Array Flat

This method is used to flat a nested array.

In the below example, we have used recursion to solve this problem. We have created 2 cases:

A base case: If depth is reached then push arr in output and return it.
A recursion case: Loop over array and check if its an Array or not. If its an array flat it, else push the number in output.

2. Array Filter

This is a Higher Order Function which takes another function and filters the array on the basis of the function.

In the below example, we have created a higher order function, which takes another function and calls on each element of the array. If it returns true then that element is inserted into result.

3. Array Reduce

This is a Higher Order Function which takes another function and reduces the array to single value/object and returns it.

In the below example, we have created a higher order function, which takes another function and calls on each element of the array. It mutates the result returned by the callback function.

4. Function Bind

The bind method is used to pass an execution context to the function.

In the below example, the custom Bind function takes the context and uses apply method to bind the function with the given context.

For more Awesome polyfills asked in interviews, check out JSVault

Connect Me @ Linkedin, Github, Twitter, Youtube 😇

Note: I have written all the methods as pure functions, as I have only wanted to show the code. We can also use Prototypal Inheritance.

All the URLs in this post are powered by Sotly.co

Top comments (17)

Jake Whelan • Aug 14 '21 • Edited

While this sounds like it would be a good answer please do not do this; because that would be a red flag.

The point of this kind of interview exercise is not about whether it’s practical to write a polyfill for a well supported feature. I encourage my teams to use all ES2021 features and we polyfill/transpile support for everything using well known tools and resources (including core-js, as you suggest), but I would ask you this in an interview.

Why? The process of a candidate producing the polyfill gives a lot of clues about their knowledge of the JavaScript language and their problem solving skills.

For example array.prototype.filter in addition to demonstrating knowledge of how that feature works, demonstrates working knowledge of:

How polyfills work
Feature detection
Loops
Prototypical inheritance
Scope/block scope
Function as a first class citizen
Array mutation

The algorithmic details of the implementation would have some weight as well, but for me this question is more about probing for language and platform knowledge.

The example for array.prototype.filter in this article (depending on seniority of candidate) wouldn’t be acceptable, because its not a polyfill: it’s a ponyfill.

Without implementing feature detection, removing the first argument (arr), and finally applying this to the Array prototype in the global scope: this is not a 1:1 replacement for array.prototype.filter.

Abhishek Raj • Aug 15 '21

In this article, I was trying to show how those method works and I have also written at the end to use the Prototypal Inheritance way.

I have written it as partial polyfill.

Marc Ziel • Aug 14 '21

Your flat function doesn't produce the same output for depth = 0 as builtin counterpart and is a bit bloated. I'd prefer:

function flat(arr, depth = 1, output = []) {
  for (const item of arr) {
    if (depth > 0 && Array.isArray(item)) {
      flat(item, depth - 1, output);
    } else {
      output.push(item);
    }
  }
  return output;
}

Abhishek Raj • Aug 14 '21

I have written partial polyfill, which shows how it works. I have not tried to replicate whole code of flat method.

Also you can observe I have written it as pure function not as Array method.

Marc Ziel • Aug 14 '21

Partial polyfill, huh? Oh I see, It's not a bug it's a feature ;) Good luck with this attitude.

Abhishek Raj • Aug 14 '21

Have a read
webreflection.blogspot.com/2011/06...

Marc Ziel • Aug 14 '21

I can understand when someone skips some edge cases when writing an example because supporting them would make code really long or much harder to understand. But this isn't the case here. You could write () => [] and argue all day that this is a partial polyfill of flat because it works for some inputs. Or you could fix your buggy code.

Jake Whelan • Aug 14 '21 • Edited

Sorry I do get your point and I would never ask for the dictionary definition of prototypical inheritance because as you suggest: it’s fruitless.

However if I asked you to remove the first argument because its redundant and you couldn’t I would have to assume your knowledge of prototypical inheritance is a WIP - and that might be fine, but it depends on seniority.

As for modifying global prototypes: that’s exactly what core-js does. For polyfills it’s standard.

The polyfill: (proto: true)
github.com/zloirock/core-js/blob/m...

The documentation for proto arg:
github.com/zloirock/core-js/blob/m...

prototype as the target for the “export”:
github.com/zloirock/core-js/blob/m...

Marc Ziel • Aug 14 '21

If you don't know the proper names for programming concepts how will you be able to communicate efficiently with the rest of the team? And what are those better ways for testing? I hope it's not a random coding challenge because it isn't any better imho.

Akshay Mahajan • Mar 14 '22

The polyfill for reduce is needs a slight modification for new users reading it. If you don't provide any value to reduce, you mathematical computation will result in NaN, which is not the desired case.

Its better be like:

const reduce = (arr, callback, initVal) => {
  let result = initVal ?? arr[0];
  let i = result ? 0 : 1;

  for (i; i < arr.length; i++) {
    result = callback(result, arr[i], i, arr);
  }

  return result;
}

if the initVal is null/undefined, then the acc must be the first element and will run for (n-2) times.

This is the edge case that I also couldn't able to figure out and hence got rejected from an interview. But anyhow, I learned something. I'm not saying such questions are not good for interview, but judging on the basis on such edge cases, is not a right way to know if the candidate can work as web dev or not. BTW, I was being interviewed for SDE2 Frontend at Product based organisation.

Don't know if I can derive logic or not, but surely I can come up with some pretty good solutions and that whats matter the most.
Here is the solution I made for Angular peeps out here.
github.com/androizer/ngx-crudx