Explain call() and apply() methods in JavaScript

Call() Method: The call method is basically used to invoke the function with different this object. In JavaScript, this refers to an object. It depends on how we are calling a particular function. In the global scope, this refers to the global object window. Inside function also this refers to the global object window.

In strict mode, when we use any function then this refers to undefined. In functions like call, this could refer to a different object. With the help of the call method, we can invoke a particular function with different objects.

Syntax:

object.objectMethod.call( objectInstance, arguments )

Parameters: It takes two parameters:

• ObjectInstance: It is an object which we want to use explicitly
• Arguments: It is arguments that we want to pass to the calling function

Example 1:

<script>
    const obj = {
        firstName: "First_name",
        lastName: "Last_name",
        printName: function () {
            console.log(this.firstName 
                + " " + this.lastName);
        }
    };
    obj.printName();
</script>

Output:

First_name Last_name

It's obvious since we are calling the printName( ) function with the object obj so this should refer to object obj. And inside object obj we have firstName = "First_name" and lastName = "Last_name" so output is "First_name Last_name".

Example 2: As we know, we can make invoke a particular function with different objects. So we can invoke a function the printName with different objects also.

<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName() {
        console.log(this.firstName + " " + this.lastName);
    }
    printName.call(obj2);

</script>

Output:

Sachin Tendulkar

In this case, we are using the call method to invoke the function with the object obj2. So in this case this would be referring to object obj2. Because this depends upon how we are actually invoking the function. In this case, this will not refer to the global object window but refer to object obj2.

Passing parameter with the call method: We can also pass the parameter to the call function.

Example 3:

<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName(profession, country) {
        console.log(this.firstName + " " 
            + this.lastName + " " +
            profession + " " + country);
    }
    printName.call(obj2, "Cricketer", "India");
</script>

Output:

Sachin Tendulkar Cricketer India

When we pass parameters using the call method then we pass parameters separated by commas( , ).

Apply() method: Just like the call method we can also bind the function to any object. Using apply( ) method also we can invoke a given function with different objects.

Syntax:

object.objectMethod.apply(objectInstance, arrayOfArguments)

Parameters: It takes two parameters:

• ObjectInstance: It is an object which we want to use explicitly
• Arguments: It is arguments that we want to pass to the calling function

<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName() {
        console.log(this.firstName + " " + this.lastName);
    }
    printName.apply(obj2);
</script>

Output:

Sachin Tendulkar

Passing parameter with the apply method: We can also pass parameters with apply function.

<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName(profession, country) {
        console.log(this.firstName + " "
            + this.lastName + " " +
            profession + " " + country);
    }
    printName.apply(obj2, ["Cricketer", "India"]);
</script>

Output:

Sachin Tendulkar Cricketer India