DEV Community

JS Polyfills asked in Interviews

Abhishek Raj on August 14, 2021

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

Read full post

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