Call, Apply and Bind Method in Javascript

• In JavaScript, call(), apply() and bind() are three methods that are used to set the context of this inside a function. These methods can be used to modify the way in which a function is called and to control the value of this within a function.

• We can borrow a function from one object and use it in the context of another object using the call, apply, or bind method. This is known as function borrowing.

• When we use call or apply to borrow a function, we pass in the object we want to use as the this value for the function as the first argument. The rest of the arguments are the arguments we want to pass to the function. The function is then executed in the context of the object we passed in.

• Function borrowing is useful when we want to use a function from one object in the context of another object, without having to copy and paste the function code. This can help reduce duplication and make our code more modular.

• For example, we can borrow a toString method from an object to use it with another object that doesn't have a toString method. We can also borrow a method from a built-in object like Array or String and use it with a custom object that has similar properties.

call()

• The call() method is used to call a function with a given this value and arguments provided individually. The first argument of call() sets the value of this inside the function and the subsequent arguments are the arguments to be passed to the function.

• Syntax:

    functionName.call(thisArg, arg1, arg2, ...);

• For example, suppose we have a function sayHello() as follows:

    function sayHello() {

        console.log("Hello " + this.name);

    }

• We can call this function using the call() method as follows:

    var person = { name: "John" };

    sayHello.call(person); // output: "Hello John"

• Here, we have passed the object person as the first argument to call(). This sets the value of this inside the function to person and the function now outputs "Hello John".

apply()

• The apply() method is similar to the call() method, but the arguments to the function are provided as an array instead of individually.

    functionName.apply(thisArg, [arg1, arg2, ...]);

• For example, let's modify the sayHello() function to take a greeting as an argument:

    function sayHello(greeting) {

        console.log(greeting + " " + this.name);

    }

• We can call this function using the apply() method as follows:

    var person = { name: "John" };

    sayHello.apply(person, ["Hello"]); // output: "Hello John"

• Here, we have passed the object person as the first argument to apply() and an array ["Hello"] as the second argument. This sets the value of this inside the function to person and the function now outputs "Hello John".

bind()

• The bind() method is used to create a new function with a given this value and arguments provided in advance. The bind() method returns a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

• Syntax:

    var newFunc = functionName.bind(thisArg, arg1, arg2, ...);

• For example, let's modify the sayHello() function again to take a greeting as an argument and a closing message:

    function sayHello(greeting, closing) {

        console.log(greeting + " " + this.name + " " + closing);

    }

• We can create a new function using the bind() method as follows:

    var person = { name: "John" };

    var sayHelloToJohn = sayHello.bind(person, "Hello", "How are you?");

    sayHelloToJohn(); // output: "Hello John How are you?"

• Here, we have passed the object person as the first argument to bind() and the arguments "Hello" and "How are you?" as the subsequent arguments. This creates a new function sayHelloToJohn() that has this set to person and the arguments "Hello" and "How are you?" set in advance. When we call the new function using sayHelloToJohn(), it calls the original function sayHello() with the provided this value and the set arguments, resulting in the output "Hello John How are you?".

Why use call(), apply() and bind()?

• The call(), apply() and bind() methods are used to control the value of this inside a function. This is particularly useful in situations where we need to call a function with a specific object as this.

• For example, if we have an object car with a method drive() and we want to call the drive() method with this set to another object driver, we can use the call() method as follows:

    var car = {

        make: "Toyota",

        model: "Corolla",

        drive: function () {

            console.log(this.name + " is driving the " + this.make + " " + this.model);

        }

    };

    var driver = {

        name: "John"

    };

    car.drive.call(driver); // output: "John is driving the Toyota Corolla"

• Here, we have used the call() method to call the drive() method with this set to driver. This allows us to output the message "John is driving the Toyota Corolla" instead of "undefined is driving the Toyota Corolla".

Conclusion

• In summary, the call(), apply() and bind() methods in JavaScript are powerful tools for controlling the value of this inside a function. They are particularly useful in situations where we need to call a function with a specific object as this. By using these methods, we can write more flexible and reusable code.