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 (22)
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
flathere you might notice that is pretty similar to the support for
for...ofhere, so if the idea is to support, let's say, IE11, then the proposed solution with
for...ofwouldn'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
TBH, if in an interview somebody asks to create a polyfill for
flator similar from scratch, it raises 2 red flags for me:
I would just answer that if we actually need a polyfill for the project, I would just use
core-jsor copy it from MDN.
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.
array.prototype.filterin addition to demonstrating knowledge of how that feature works, demonstrates working knowledge of:
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.filterin 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
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:
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)
The documentation for
prototypeas the target for the “export”:
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.
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:
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:
And ask them to implement those
decrementmethods. Why would you ask them to modify the prototype of a global like
Objectwhen 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.
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.
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.
flatfunction doesn't produce the same output for
depth = 0as builtin counterpart and is a bit bloated. I'd prefer:
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.
Partial polyfill, huh? Oh I see, It's not a bug it's a feature ;) Good luck with this attitude.
Have a read
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
flatbecause it works for some inputs. Or you could fix your buggy code.
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:
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.
Very informative post ..!! Will be waiting for more topic wise interview questions from you.
Thanks for the appreciation. Will be posting more interview questions.
Thank you very much. I found this helpful.
Thanks for the feedback Doug
But Infinity - Math.pow(10, 309) is NaN 😥