What is Call, Bind and Apply method in javascript ?

Call, Bind and Apply Methods

In Javascript, call, bind, and apply functions are very useful. They let you borrow functionality from other objects. These functions seem to be doing the exact thing, but there is so much confusion around it. The main thing is when to use it, how to use it, and how it really works. There is a lot of confusion and based on my understanding I have written this blog with a simple tutorial. Since Javascript is a very flexible language, you can borrow a function from one object and use it with some other data from another object without any problems.

Let's take an example.

let name = {
    firstName: "Avinash",
    lastName: "Gupta"
    getFullName: function(){
        console.log(this.firstName, " ", this.lastName)
    }
}
name.getFullName(); // Avinash Gupta

let name2 = {
    firstName: "Gaurav",
    lastName: "Gupta"
    getFullName: function(){
        console.log(this.firstName, " ", this.lastName)
    }
}
name2.getFullName(); // Gaurav Gupta

Call():

in the above example, we saw that we got the full name. but this is not a good way. as we saw that we are using the same function again and again to get the full name. It's the case where the call method comes into the picture.

    In javascript, call provides a way to call a method on an object itself rather than providing its own method. In a call method, we provide an owner object as an argument. It invokes a function with a provided object and arguments one by one.

here we have normal object name1 and name2 with 'firstName' & 'lastName' key-value pair. and getFullName() method that returns a full name.

let name1 = {
    firstName: "Avinash",
    lastName: "Gupta"
}

let name2 = {
    firstName: "Gaurav",
    lastName: "Gupta"
}

let getFullName = function(){
    console.log(this.firstName, " ", this.lastName)
}

getFullName.call(name1); // Avinash Gupta
getFullName.call(name2); // Gaurav Gupta

as we saw that we proved name1 and name2 as owner objects. and 'this' keyword in getFullName() method refers to the provided owner object.

Apply():

Apply method is very similar to the call() method but there is a very small difference between call and apply methods. it allows you to pass arguments as an array.
in this apply method, we can pass in an array instead of passing arguments one by one. this is where we use apply method.
let take an example:

let obj = {
    age: 20,
}

let arr = [1,3,7];

let increaseAge = function(val1, val2, val3){
    return this.age = this.age + val1 + val2 + val3;
}

increaseAge.apply(obj,arr); // now obj.age is 31

Bind():

The bind method 'binds' a function with an object. it does not execute the function immediately but it returns a new function. Then we can call this function with required arguments when required.

let obj = {
    sum: 0,
}

let sum = function(val1, val2, val3){
    return this.sum = this.sum + val1 + val2 + val3;
}

let calcSum = sum.bind(obj);
calcSum(1,2,3); // This will return 6