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.
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 -:
| call() Method | apply() Method | |
| 1. | 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 |
| 2. | It is a Predefined Method in Javascript. | Its return value is the result of the calling function along provided this value and arguments. |
| 3. | 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 |
| 4. | This method can also accepts parameters. | This method takes parameter as an array |
| 5. | Syntax -: object.objectMethod.call( objectInstance, arguments ) | Syntax -: object.objectMethod.apply(objectInstance, arrayOfArguments) |
.png)
