In this article, we are going to cover:

• What is polyfill?
• How to write our own polyfill for bind()?

What is polyfill?

According to MDN docs:

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.

That means if some older browser does not support some modern functionality like the bind() method in this article we write our own implementation of bind().

How to write our own polyfill of bind()?

Let's dive into the code and see how to write this method:

let person ={
    firstName: "Sanket",
    lastName: "Dhabarde"
}

let getInfo = function(){
 console.log(this.firstName + " "+ this.lastName);
}

Now if we use the bind() method for this generic function we will get the output as:

let personInfo = getInfo.bind(person);
personInfo(); // Sanket Dhabarde

Now let's try to write our own bind().

First, we need to add this method to every function. to do this we can use Function. prototype.

1. As we know the bind return the function so let's start with that

Function.prototype.myBind = function(){
      return function(){

      }
}

2. Now while returning the function we want this myBind() to call getInfo() and when we use the dot operator the this keyword refers to the function. so all we need to do is store this keyword in any variable and call it in return function.

Also while using the bind() we pass the first argument as the object in which we wanna use this bind() method, we can use the spread operator to get all the arguments.

Function.prototype.myBind = function(...args){
      let obj = this;
      return function(){
          obj.call(args[0]);
      }
}

Now if we use this method myBind() it will print the same result as the bind() method.

let personInfo1 = getInfo.myBind(person);
personInfo1(); //Sanket Dhabarde

3. What if the function takes some parameters?

let getInfo = function(hometown){
 console.log(this.firstName + " " + this.lastName + " from "+ hometown);
}

in this case bind() method work completely fine but our myBind() method through undefined.

let personInfo = getInfo.bind(person, "Chandrapur");
personInfo(); // Sanket Dhabarde from Chandrapur

let personInfo1 = getInfo.myBind(person, "Chandrapur");
personInfo1(); //Sanket Dhabarde from undefined

This is because we are passing only one argument in the return function i.e. the object we wanna apply the method to. so let's pass on other arguments as well.

The parameters that we receive are in the form of an array so let's slice the array from index 1 so that 1st parameter is excluded because we are already passing it.

call() method doesn't work in that case so let's use apply() method so that we can pass arguments in the form of an array.

Function.prototype.myBind = function(...args){
    let obj=this;
    let allArgs = args.slice(1);
    return function(){
          obj.apply(args[0], allArgs);
    }
}

Now if we call the function again we will get the same output:

let personInfo = getInfo.bind(person, "Chandrapur");
personInfo(); // Sanket Dhabarde from Chandrapur

let personInfo1 = getInfo.myBind(person, "Chandrapur");
personInfo1(); //Sanket Dhabarde from Chandrapur

4. What happens if our function takes another parameter and we pass it along with the calling function.

let getInfo = function(hometown, state){
 console.log(this.firstName + " " + this.lastName + " from "+ hometown+ ", "+ state);
}

let personInfo = getInfo.bind(person, "Chandrapur");
personInfo("Maharashtra"); // Sanket Dhabarde from Chandrapur, Maharashtra

let personInfo1 = getInfo.myBind(person, "Chandrapur");
personInfo1("Maharashtra"); //Sanket Dhabarde from Chandrapur, undefined

The bind() method works perfectly fine but our method returns undefined this is because we are not receiving any parameter in returning function. so let's receive the parameter in the function we are returning as well and combine all the parameters in a single array and pass it along with the apply function.

Function.prototype.myBind = function(...args){
    let obj=this;
    let allArgs1 = args.slice(1);
    return function(...args2){
        let allArgs2 = [...allArgs1, ...args2];
        obj.apply(args[0], allArgs2);
    }
}

Now this will work fine:

let personInfo1 = getInfo.myBind(person, "Chandrapur");
personInfo1("Maharashtra"); //Sanket Dhabarde from Chandrapur, Maharashtra

Now our own bind() is created. we can use this on any function same as the bind() method.

You can read about the call(), apply(), and bind() in my previous blog. call(), apply() and bind()

That's it for this article!