Learn the concept
Arrays
A polyfill is code that provides modern functionality in older environments that don't natively support it. Implementing Array.prototype.map requires iterating over the array, calling the callback with each element, index, and the original array, and collecting results into a new array.
A polyfill is a piece of code (usually JavaScript) that provides the implementation of a feature on browsers or environments that do not support it natively. The term was coined by Remy Sharp in 2010 — it "fills in" the gaps in older environments so your code works everywhere.
Polyfills use feature detection to check if a feature already exists before adding it:
if (!Array.prototype.includes) {
Array.prototype.includes = function (searchElement, fromIndex) {
// implementation
};
}This pattern ensures the polyfill only runs when needed and doesn't override native implementations (which are typically faster).
Promise, Array.prototype.flat, Object.entries). Works by adding to prototypes or globals.class → prototype-based). Cannot polyfill new APIs — only transforms syntax.You often need both: Babel transpiles syntax, and a polyfill library like core-js fills in missing APIs.
The native map() creates a new array by calling a callback function on every element. A correct implementation must:
this context (the array)thisArg for the callback's this bindingInterviewers frequently ask candidates to implement:
Array.prototype.map — transform each elementArray.prototype.filter — keep elements matching a conditionArray.prototype.reduce — accumulate a value from all elementsFunction.prototype.bind — create a bound function with preset thisPromise — asynchronous value with chainingArray.prototype.flat — flatten nested arraysThese test understanding of how JavaScript built-ins actually work under the hood.
// Polyfill for Array.prototype.map
if (!Array.prototype.myMap) {
Array.prototype.myMap = function (callback, thisArg) {
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
const result = new Array(this.length);
for (let i = 0; i < this.length; i++) {
// Skip holes in sparse arrays
if (i in this) {
result[i] = callback.call(thisArg, this[i], i, this);
}
}
return result;
};
}
// Usage
const nums = [1, 2, 3, 4];
const doubled = nums.myMap((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]
// With thisArg
const multiplier = { factor: 10 };
const scaled = nums.myMap(function (n) {
return n * this.factor;
}, multiplier);
console.log(scaled); // [10, 20, 30, 40]E-commerce sites like Flipkart polyfill modern APIs to support older browsers still used by a significant portion of their user base in emerging markets.
Projects use core-js with Babel to automatically include only the polyfills needed based on target browser versions specified in browserslist configuration.
Implement polyfills for Array.prototype.flat, Array.prototype.find, Object.entries, and Function.prototype.bind. Write tests to verify they match native behavior.