Recently I have experienced the real pain of polyfilling the innocent looking Number.isSafeInteger method.
What is a polyfill?A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
It happened at work; something was not working for IE 11, and there was a lot of culprit pull requests, but one in particular sparkled my attention. In this pull request, there was a line of code that was using Number.isSafeInteger.
return arr.filter(Number.isSafeInteger)
Nothing special, until I checked the famous browser compatibility tables of MDN web docs to confirm that my theory was real, Number.isSafeInteger
is not supported in IE, oh snap.
I ran to the polyfill section, I copied out the recommended polyfill code, and I victoriously announced to my team, “I found it!“.
Number.isSafeInteger = Number.isSafeInteger || function (value) { return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER }
Not that simple, it turns out that Number.isInteger was also not supported and we had no polyfill again for it. I did not want to commit the same mistake twice, so this time I double-checked the source code of the polyfill for Number.isInteger
.
Number.isInteger = Number.isInteger || function (value) { return typeof value === 'number' && isFinite(value) && Math.floor(value) === value }
So guess what? Yes, Number.isFinite is also not supported in IE!
if (Number.isFinite === undefined) Number.isFinite = function (value) { return typeof value === 'number' && isFinite(value) }
You maybe think that’s it, he finished with polyfilling madness. I thought the same, I don’t blame you. Do you remember the original method that I was desperately trying to polyfill?
Number.isSafeInteger = Number.isSafeInteger || function (value) { return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER }
It happens that Number.MAX_SAFE_INTEGER is also not supported on IE, so I had to polyfill that as well.
if (!Number.MAX_SAFE_INTEGER) { Number.MAX_SAFE_INTEGER = 9007199254740991 // Math.pow(2, 53) - 1;}
»Lessons
- Whenever you spot unconventional/non-frequently-used methods in your code reviews, scream to the world that your peer might be breaking something, ask them to consult the documentation for browser compatibility.
- Don’t blindly trust MDN web docs Polyfill sections. Unfortunately, they don’t warn you about whether or not the implementation of the polyfill needs to be polyfilled itself.