What is the difference between call and apply in JavaScript?

Last Updated : 18 Sep, 2019

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.

<!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:

<!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:

Related Articles