What are Polyfills?
Polyfills are custom implementation to the common javascript methods. There can be cases where older browser is not supporting the latest javascript methods.So there we write polyfills.
For Example:
Polyfill for map method
// Array.map using Array Method
let array=[10,20,30,40,50];
let result=array.map(item=>item*2);
console.log("Result",result);
// Our Prototype for map
Array.prototype.myMap=function(fn){
if(typeof fn !=="function"){
throw new Error("Passed parameter is not function");
}
let array=this;
let output=[];
for(let i=0;i<array.length;i++){
output.push(fn(array[i]));
}
return output
}
console.log(array.myMap(item=>item*2));
I think you will be able to write for filter method as well. let me write for reduce.
Polyfill for reduce method
let array=[1,2,3,4,5,6,7];
let defaultValue=0;
let result=array.reduce((sum,acc)=>sum+acc,defaultValue);
console.log(result,"Result");
// Custom Polyfill
Array.prototype.myReduce=function(fn,value){
if(typeof fn !=="function"){
throw new Error("Passed parameter is not a function")
}
let array=this;
let defaultValue=value || 0;
let result=defaultValue;
for(let i=0;i<array.length;i++){
result=fn(result,array[i]);
}
return result;
}
console.log(array.myReduce((acc,curr)=>acc+curr,0));
Polyfill for includes method
// Includes method of array
// This method is used to check if item exits in array or not
let array=[1,2,3,4,5,6];
console.log(array.includes(3));
console.log(array.includes(10));
// Custom Implementation
Array.prototype.myInclude=function(value){
if(typeof value ==="number" || typeof value ==="string"){
let array=this;
for(let i=0;i<array.length;i++){
if(array[i]===value){
return true
}
}
return false
}
else {
throw new Error("Passed value not allowed!")
}
}
console.log(array.myInclude(3))
Guys, do write other polyfills as well, As these are now days commonly getting asked in the interviews.
List you should practise next:
function.prototype.call
function.prototype.apply
function.prototype.bind
Polyfill for Promise.all
Polyfill for debounce, throttle
Sharing solution for three commonly asked polyfill in interviews, but do practise on your own.
Function.prototype.myBind = function (context, ...args) {
const fn = this;
return function (...newArgs) {
return fn.apply(context, [...args, ...newArgs]);
};
};
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
function throttle(fn, limit) {
let inThrottle = false;
return function (...args) {
if (!inThrottle) {
fn.apply(this, args);
inThrottle = true;
setTimeout(() => {
inThrottle = false;
}, limit);
}
};
}
Top comments (0)