What is the difference between call and apply in JavaScript ?

Last Updated : 26 Dec, 2022

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

Syntax:

object.objectMethod.call( objectInstance, arguments )

JavaScript 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)

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

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

html

<body style="text-align:center;"> 
    <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1> 
    <h3>call() method</h3> 
  
    <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>

Output:

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

HTML

<body style="text-align:center;"> 
  
    <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1> 
    <h3>JavaScript apply() method</h3> 
  
    <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>

Output:

Let us understand differences in a tabular form -:

JavaScript call() Method	JavaScript apply() Method
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
It is a Predefined Method in Javascript.	Its return value is the result of the calling function along provided this value and arguments.
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
This method can also accept parameters.	This method takes the parameter as an array