JS Polyfills asked in Interviews

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

Comments

[Luke Shiru]

The idea with polyfills is to add something that is not supported by the browser being used by the user, if you take a look at the support for flat here you might notice that is pretty similar to the support for for...of here, so if the idea is to support, let's say, IE11, then the proposed solution with for...of wouldn't work. You might have better luck with forEach (support is better).

Here you can check a great polyfill for flat. Generally, if you look for any array method in MDN, you'll get a link to a polyfill for it (or you can just use core-js).

TBH, if in an interview somebody asks to create a polyfill for flat or similar from scratch, it raises 2 red flags for me:

• 🚩 The project might be one of those nightmarish projects that need to support IE9 or something like that.
• 🚩 The interviewer believes that reinventing the wheel is a smart move.

I would just answer that if we actually need a polyfill for the project, I would just use core-js or copy it from MDN.

Cheers!

[Jake Whelan]

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.

[Luke Shiru]

The thing is, you can test all that by asking the candidate to "add a method to all arrays", not a polyfill. The correct answer to a polyfill is to use an off the shelve solution. Also modifying a global prototype is not ideal.

My point mainly is that:

1. An interview shouldn't be testing something unrelated to the actual position (like those interviews that ask for the definition of "Prototypical inheritance" like we were on highschool). There are folks that are excellent coders, and they don't know the proper name of some things (practical learners), so asking for definitions that you can Google is kinda pointless.
2. There are better ways for testing this without the need of making a polyfill (which already has a solution in the real world).

[Jake Whelan]

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]

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.

[Luke Shiru]

Edit: This answer was supposed to go to this comment but for some reason it went to another one (I answered from the notifications on DEV).

Yup, maybe I wasn't clear and what I said got mixed up, but those are two different things:

• You shouldn't ask for pollyfills in interviews, because in the real world we already have solutions for those (as core-js).
• You can test for something like "adding something new to an existing prototype, but that's not something you should do in general, unless that prototype is completely under your control.

So to test all the things you mentioned in your previous comment (even if we nowadays we have classes in JS), you could simple give the candidate a piece of code like this:

function Example (initialCount = 0) {
  this.count = initialCount;
}

// ???

const example = new Example();

example.increment().count; // should be 1
example.increment(2).count; // should be 3
example.decrement(3).count; // should be 0

And ask them to implement those increment and decrement methods. Why would you ask them to modify the prototype of a global like Array or Object when is a bad practice in the real world, or to implement a polyfill when that's done by packages like core-js? We should be interviewing for real world scenarios.

---

About this comment I was talking about terms like "hoisting", "asi" and stuff like that, which many folks are aware of but don't know the "actual name" for it, and it doesn't actually matter in the day-to-day work.

[Abhishek Raj]

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.

[Abhishek Raj]

Thanks for pointing out it won't work on old browsers due to for..of.. loop.

Some interviewers also ask these type of question to check can the candidate think of recursive solution or not.

[Marc Ziel]

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]

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]

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

[Abhishek Raj]

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

[Marc Ziel]

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.

[Akshay Mahajan]

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

[Abhishek Raj]

1. Companies test your problem solving ability not your memorizing ability.
2. These questions are asked by Paypal, AWS.

[Riddhi Agrawal]

Very informative post ..!! Will be waiting for more topic wise interview questions from you.

[Abhishek Raj]

Thanks for the appreciation. Will be posting more interview questions.

[Doug Rogers]

Thank you very much. I found this helpful.

[Abhishek Raj]

Thanks for the feedback Doug

[Abhishek Dubey]

But Infinity - Math.pow(10, 309) is NaN 😥