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	To append an array to another. To write build-in function without looping over	To chain constructors of an object. To invoke an anonymous function. To invoke a function and specify the context for 'this' To invoke a function without specifying the first argument.

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.