DEV Community

Kush Bhandari
Kush Bhandari

Posted on

Polyfills

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));
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

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]);
  };
};
Enter fullscreen mode Exit fullscreen mode
function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
Enter fullscreen mode Exit fullscreen mode
function throttle(fn, limit) {
  let inThrottle = false;

  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;

      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)