What's the difference between function.call and function.apply?

Butterfly Today I read a great blog post by Mark Needham titled JavaScript: Confusing ‘call’ and ‘apply’. A while back I wrote an article for our Tech Times newsletter about the JavaScript arguments object. It was called arguments: A JavaScript Oddity. Because it has all sorts of interesting behaviors that are useful to know about. I realized that although I’d used both call and apply in that article I hadn’t talked about the difference.

Well it’s actually quite simple. First of all, both methods expect a thisArg as the first argument. This is the argument that gives the function a context; it determines the value of the JavaScript keyword this inside the function that is called or applied. The single difference is that the call method requires that arguments are specified separately; the apply method takes them as an array. It’s clearer if you see the syntax:

function.call(thisArg[, argument1[, argument2[, ...]]]);

function.apply(thisArg[, argumentArray]);

So if you’re working with the arguments object in your JavaScript, you can call any function by using the apply method and simply pass in the existing arguments object as the array argument.

Hope that’s useful to you!

Feature image by Sudhamshu. Can you work out the significance?

Frequently Asked Questions (FAQs) about Function Call and Function Apply in JavaScript

What is the main difference between function call and function apply in JavaScript?

The primary difference between function call and function apply in JavaScript lies in the way arguments are passed to the function. With the call() method, you pass arguments individually, separated by commas. On the other hand, the apply() method requires arguments to be passed as an array. Both methods allow you to control the value of ‘this’ within the function, but the way you pass additional parameters differs.

Can you provide an example of using function call and function apply?

Sure, let’s consider a simple function that adds two numbers. Using the call() method, you would do something like this:
function add(a, b) {
return a + b;
}
console.log(add.call(null, 1, 2)); // Outputs: 3
And using the apply() method, it would look like this:
function add(a, b) {
return a + b;
}
console.log(add.apply(null, [1, 2])); // Outputs: 3
In both cases, we’re calling the add function with ‘this’ set to null (since it’s not used in this function), and passing in 1 and 2 as arguments.

When should I use function call over function apply, and vice versa?

The choice between call() and apply() depends on how you want to pass arguments to the function. If you have a list of arguments and you don’t know their number in advance, apply() can be more convenient because it takes an array. If you know the number of arguments, or if there are no arguments at all, call() can be simpler to use.

Can I use function call and function apply with constructor functions?

Yes, you can use both call() and apply() with constructor functions. However, you need to be careful when using apply() with constructor functions that expect multiple arguments. Since apply() takes an array of arguments, you need to ensure that the array contains the correct number of elements.

What is the ‘this’ value in function call and function apply?

In both call() and apply(), the first argument you pass is the value that should be used as ‘this’ within the function. This allows you to control the context in which the function is executed. If you pass null or undefined as the first argument, the function will be executed in the global context (or undefined in strict mode).

Can I use function call and function apply with arrow functions?

While you can technically use call() and apply() with arrow functions, it’s important to note that arrow functions do not have their own ‘this’ value. Instead, they inherit ‘this’ from the surrounding scope. Therefore, using call() or apply() to change the ‘this’ value of an arrow function will have no effect.

What is the performance difference between function call and function apply?

In most cases, the performance difference between call() and apply() is negligible and should not be a deciding factor. However, if you’re dealing with a function that takes a large number of arguments, apply() could be slightly slower because it needs to iterate over the array of arguments.

Can I use function call and function apply with built-in JavaScript functions?

Yes, you can use call() and apply() with built-in JavaScript functions. This can be useful when you want to use a method that exists on one object type with an object of a different type.

What happens if I pass too many or too few arguments to function call or function apply?

If you pass too many arguments to call() or apply(), the extra arguments will simply be ignored. If you pass too few arguments, the missing arguments will be set to undefined.

Are function call and function apply methods available in all JavaScript environments?

Yes, both call() and apply() are part of the ECMAScript standard and are available in all modern JavaScript environments, including browsers and Node.js.

What’s the difference between function.call and function.apply?