What is the difference between call and apply in JavaScript?

21 Apr, 2022
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 -:
Syntax -:
object.objectMethod.call( objectInstance, arguments )
Syntax -:
object.objectMethod.apply(objectInstance, arrayOfArguments)
mayank007rawa
javascript-functions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?