What is the difference between call and apply in JavaScript?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right






                        filter_none








Output: