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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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

Table of Contents

What is the difference between call and apply in JavaScript?

Start Your Coding Journey Now!