Call, Apply and Bind Functions In JavaScript

Function Borrowing

In JavaScript, function borrowing refers to the practice of reusing a function from one object or context in another object or context. This is achieved by binding the function to the new object or context so that it can be called with the new object's properties and methods.

Function Borrowing is often used in object-oriented programming, where it allows developers to reuse code and avoid duplicating functionality. For example, if you have two objects that share a similar method, you can borrow that method from one object and use it in the other object without having to duplicate the code.

Function Borrowing can be done using the "Call, Apply and Bind Methods in JavaScript".

Call Method

let fullName = {
  firstName: "Sid",
  lastName: "Singh",
};

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

printFullName.call(fullName, "Bokaro"); // Sid Singh from Bokaro

Here we see that when we use the call method we have to tell the JavaScript engine which function needs to be invocated. Then we give the object which tells the JavaScript engine where our "this" keyword need to be pointed (fullName object). Then we give any argument that needs to be passed into that function (printFullName function). Another Example of the Call Method with more than one argument is given below.

let fullName = {
  firstName: "Sid",
  lastName: "Singh",
};

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

printFullName.call(fullName, "Bokaro", "Jharkhand"); // Sid Singh from Bokaro, Jharkhand

Note: We pass the arguments as comma-separated values individually.

Apply Method

Here the main difference from the "Call Method" is that we need to pass the arguments to the function as a list. In the last code, we saw that we had to pass the hometown and the state to the function printFullName. If we had to do something similar to the previous code just by using the "Apply Method", we can do that as follows

printFullName.apply(fullName, ["Bokaro", "Jharkhand"]); // Sid Singh from Bokaro, Jharkhand

Here, similarly the "Apply Method" takes in the fullName object as the reference to "this" variable. Then the other arguments needed in printFullName function are hometown and state. Those are passed as a list within the square brackets, [].

Bind Method

Now the Bind Method acts a bit differently than the Call and Apply Methods. What Bind Method does is that it binds the function with the object passed and then it returns a copy of it rather than just calling/invoking that function instantaneously. We can sort of store that function in a variable and can invoke/call it later on when we need it.

Below is an example of the "Bind Method".

let fullName = {
  firstName: "Sid",
  lastName: "Singh",
};

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

let printMyName = printFullName.bind(fullName, "Bokaro", "Jharkhand");
printMyName();

Here we need to send the arguments in form of comma-separated values just like in the "Call Method" rather than a list.

We can do one more thing using the bind method. We can just pass the reference to the "this" variable while binding and then later on we can give different arguments for the function while calling it.

let printMyName = printFullName.bind(fullName);
printMyName("Bokaro", "Jharkhand"); //Sid Singh from Bokaro, Jharkhand
printMyName("Greater Noida", "Uttar Pradesh"); // Sid Singh from Greater Noida, Uttar Pradesh