Skip to content
Related Articles

Related Articles

What is the difference between call and apply in JavaScript?

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 21 Apr, 2022
Improve Article
Save Article

call() Method: It calls the method, taking the owner object as argument. The keyword this refers to the ‘owner’ of the function or the object it belongs to. We can call a method which can be used on different objects. 

Syntax:

object.objectMethod.call( objectInstance, arguments )

Parameters: It accepts two parameters as mentioned above and described below:

  • objectInstance: It holds the instance of an object.
  • arguments: The call() method takes the comma separated arguments.

apply() Method: The apply() method is used to write methods, which can be used on different objects. It is different from the function call() because it takes arguments as an array. 

Syntax:

object.objectMethod.apply(objectInstance, arrayOfArguments)

Parameters: It accepts two parameters as mentioned above and described below:

  • objectInstance: It holds the instance of an object.
  • arrayOfArguments: The apply() method takes the array of arguments.

Difference between call() and apply() method: The only difference is call() method takes the arguments separated by comma while apply() method takes the array of arguments. 

Example 1: This example uses call() method to call a function. 

html




<!DOCTYPE html>
<html>
    <head>
        <title>call() method</title>
    </head>
     
    <body style = "text-align:center;">
        <h1 style = "color:green;" >
            GeeksForGeeks
        </h1>
 
        <button onClick="fun()">
            click
        </button>
         
        <p id="GFG"></p>
 
         
        <!-- Script to use call() method to call
            function -->
        <script>
            function fun() {
            let p = {
                fullName: function(addr1, addr2) {
                return this.fName + " " + this.lName
                        + ", " + addr1 + ", " + addr2;
                }
            }
                 
            let p1 = {
                fName:"GFGfName",
                lName: "GFGlName",
            }
                 
            let x = p.fullName.call(p1, "India", "USA");
            document.getElementById("GFG").innerHTML = x;
            }
        </script>
    </body>
</html>

Output:

  • Before clicking the button:

 

  • After clicking the button: 

Example 2: This example does the same work by using apply() method.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript apply() method</title>
    </head>
         
    <body style = "text-align:center;">
     
        <h1 style = "color:green;" >
            GeeksForGeeks
        </h1>
 
        <button onClick="fun()">
            click
        </button>
         
        <p id="GFG"></p>
 
         
        <script>
            function fun() {
                let p = {
                fullName: function(addr1, addr2) {
                    return this.fName + " " + this.lName
                            + ", " + addr1 + ", " + addr2;
                }
            }
            let p1 = {
                fName:"GFGfName",
                lName: "GFGlName",
            }
                let x = p.fullName.apply(p1, ["India", "USA"]);
                document.getElementById("GFG").innerHTML = x;
            }
        </script>
    </body>
</html>

Output :

  • Before clicking the button: 

  • After clicking the button: 

Let us understand differences in a tabular form -:

 call() Methodapply() Method
1.It is used to write such a method that can be used on different objects.It is used to write methods, which can be used on different objects
2.It is a Predefined Method in Javascript.Its return value is the result of the calling function along provided this value and arguments.
3.It is used for an object to use a method that belongs to a different object.We can use a list with this function instead of the array
4.This method can also accepts parameters.This method takes parameter as an array
5.

Syntax -:

object.objectMethod.call( objectInstance, arguments )

Syntax -:

object.objectMethod.apply(objectInstance, arrayOfArguments)


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!