Categories
dynamic function javascript performance

What is the difference between call and apply?

3356

What is the difference between using Function.prototype.apply() and Function.prototype.call() to invoke a function?

var func = function() {
  alert('hello!');
};

func.apply(); vs func.call();

Are there performance differences between the two aforementioned methods? When is it best to use call over apply and vice versa?

9

  • 761

    Think of a in apply for array of args and c in call for columns of args.

    Jun 12, 2012 at 6:17


  • 195

    @LarryBattle I do almost the same, but I think a in apply for array and c in call for comma (i.e comma separated arguments).

    – Samih

    Dec 6, 2013 at 16:20

  • 9

    I agree it’s stupid. What’s annoying is that somehow this question gets asked during interviews because some influential chump added the question to their list of important js questions.

    – Ringo

    Mar 10, 2014 at 22:55

  • 11

    You apply for a job once (one argument), you [phone] call people many times (several arguments). Alternative: there are [too?] many Call of Duty games.

    Dec 4, 2014 at 3:27

  • 1

    When the intention is to invoke a variadic function with a list of argument values regardless of “this” value, then use the ES6 spread operator, e.g. fn(...input) where input is an array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – Gajus

    Dec 18, 2014 at 1:22

3902

The difference is that apply lets you invoke the function with arguments as an array; call requires the parameters be listed explicitly. A useful mnemonic is A for array and C for comma.”

See MDN’s documentation on apply and call.

Pseudo syntax:

theFunction.apply(valueForThis, arrayOfArgs)

theFunction.call(valueForThis, arg1, arg2, ...)

There is also, as of ES6, the possibility to spread the array for use with the call function, you can see the compatibilities here.

Sample code:

function theFunction(name, profession) {
    console.log("My name is " + name + " and I am a " + profession +".");
}
theFunction("John", "fireman");
theFunction.apply(undefined, ["Susan", "school teacher"]);
theFunction.call(undefined, "Claude", "mathematician");
theFunction.call(undefined, ...["Matthew", "physicist"]); // used with the spread operator

12

  • 32

    One thing to add is that the args must be a numerical array ([]). Associative arrays ({}) will not work.

    Jul 28, 2012 at 16:18

  • 369

    @KevinSchroeder: In javascript parlance, [] is called an array, {} is called an object.

    – Martijn

    Jan 10, 2013 at 15:19

  • 96

    I often used to forget which takes an array, and which expects you to list the arguments. A technique I used to remember it is if the first letter of the method starts with a then it takes an array i.e a pply array

    Oct 6, 2013 at 20:43


  • 19

    @SAM Using call instead of a normal function call only makes sense if you need to change the value of this for the function call. An example (that convert a functions arguments-object to an array): Array.prototype.slice.call(arguments) or [].slice.call(arguments). apply makes sense if you have the arguments in an array, for example in a function that calls another function with (almost) the same parameters. Recommendation Use a normal function call funcname(arg1) if that does what you need, and save call and apply for those special occasions when you really need them.

    – some

    Jul 16, 2014 at 5:04

  • 6

    @KunalSingh Both call and apply takes two parameters. The first argument of apply' and call` function must be the owner object and the second parameter will be array or comma separated parameters respectively. If you pass null or undefined as first argument then in non-strict mode they are replaced with global object i.e. window

    Feb 24, 2016 at 12:42

250

K. Scott Allen has a nice writeup on the matter.

Basically, they differ on how they handle function arguments.

The apply() method is identical to call(), except apply() requires an array as the second parameter. The array represents the arguments for the target method.”

So:

// assuming you have f
function f(message) { ... }
f.call(receiver, "test");
f.apply(receiver, ["test"]);

3

  • 46

    the second parameter of apply() and call() is optional, not required.

    Jul 29, 2011 at 4:01

  • 39

    First parameter is not required too.

    – Ikrom

    Jun 5, 2013 at 5:33

  • 3

    @Ikrom, the first parameter is not required for call but a requirement for apply

    Jan 28, 2020 at 6:58

169

To answer the part about when to use each function, use apply if you don’t know the number of arguments you will be passing, or if they are already in an array or array-like object (like the arguments object to forward your own arguments. Use call otherwise, since there’s no need to wrap the arguments in an array.

f.call(thisObject, a, b, c); // Fixed number of arguments

f.apply(thisObject, arguments); // Forward this function's arguments

var args = [];
while (...) {
    args.push(some_value());
}
f.apply(thisObject, args); // Unknown number of arguments

When I’m not passing any arguments (like your example), I prefer call since I’m calling the function. apply would imply you are applying the function to the (non-existent) arguments.

There shouldn’t be any performance differences, except maybe if you use apply and wrap the arguments in an array (e.g. f.apply(thisObject, [a, b, c]) instead of f.call(thisObject, a, b, c)). I haven’t tested it, so there could be differences, but it would be very browser specific. It’s likely that call is faster if you don’t already have the arguments in an array and apply is faster if you do.

0