Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between Function.prototype.apply and Function.prototype.call in JavaScript
Function.prototype.apply and Function.prototype.call are methods that allow you to call a function with a specific this value and arguments. The main difference between the two is that apply lets you pass in an array of arguments, while call requires you to list the arguments one by one.
Function.prototype.apply
Function.prototype.apply is a method that allows you to call a function with a specific this value and an array of arguments.
Syntax
The syntax for using apply is −
func.apply(thisArg, argsArray)
Here thisArg is the value that will be used as this inside the function. argsArray is an array of arguments that will be passed to the function.
Example
Here’s an example of using apply to call a function −
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
function sayHello(name) {
return "Hello, " + name + "!";
}
document.getElementById("result").innerHTML = sayHello.apply(null, ["John"])
</script>
</body>
</html>Output
The above code will print the below output.
Hello, John!
As you can see, we passed null for thisArg because we don’t want to set a this value. And we passed an array for argsArray, which contains the argument “John”. The result is that the sayHello function is called with “John” as the name parameter.
Function.prototype.call
Function.prototype.call is a method that allows you to call a function with a specific this value and a list of arguments.
Syntax
The syntax for using call is
func.call(thisArg, arg1, arg2, ...)
Here thisArg is the value that will be used as this inside the function. arg1, arg2, ... are the arguments that will be passed to the function.
Example
Here’s an example of using the call to call a function −
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
function sayHello(name) {
return "Hello, " + name + "!";
}
document.getElementById("result").innerHTML = sayHello.call(null, ["John"])
</script>
</body>
</html>Output
The above code will print the below output.
Hello, John!
As you can see, we passed null for thisArg because we don’t want to set a this value. And we passed “John” as the only argument. The result is that the sayHello function is called with “John” as the name parameter.
Differences between Function.prototype.apply and Function.prototype.call
The following table highlights the major differences between Function.prototype.apply and a Function.prototype.call −
Basis of comparison | Function.prototype.apply | Function.prototype.call |
|---|---|---|
Definition | This method allows us to call a function with a specific this value and an array of arguments. | This method allows us to call a function with a specific this value and a list of arguments. |
Arguments | We pass an array of arguments. | We pass a list of the arguments. |
Speed | Because it does not create a new function, it is faster than the call. | Because it creates a new function each time it is called, it is slower than the apply. |
Usage |
|
|
Conclusion
In this tutorial, we discussed the differences between the apply and call methods. The main difference between these two is how they are accepting the arguments. There are different usages of these methods. You can check the usage row in the above table.
413 Views
To Continue Learning Please Login