By John Duff

2009-12-31 19:56:25 8 Comments

What is the difference between using call and apply to invoke a function?

var func = function() {

func.apply(); vs;

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


@flatline 2009-12-31 20:00:42

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), 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"]);, "Claude", "mathematician");, ...["Matthew", "physicist"]); // used with the spread operator

@devios1 2011-06-23 01:31:11

Are they both supported by the majority of browsers? I seem to remember reading that call() was more of an IE thing.

@Kevin Schroeder 2012-07-28 16:18:38

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

@Martijn 2013-01-10 15:19:59

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

@aziz punjani 2013-10-06 20:43:02

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

@some 2014-07-16 05:04:43

@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): or [] 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.

@Ralph Cowling 2014-11-10 11:33:55, ["Claude", "mathematician"]); // 'My name is Claude,mathematician and I am a undefined.' Oh Claude! <3 (…)

@Kunal Singh 2015-08-27 06:40:23

theFunction.apply(undefined, ["Susan", "school teacher"]);, "Claude", "mathematician"); Why the first argument is undefined while calling?

@A J Qarshi 2016-02-24 12:42:44

@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

@xgqfrms 2016-12-25 12:07:51

# codes bugs theFunction.apply(undefined, ...["Matthew", "physicist"]); A_better_apply

@Álvaro González 2017-05-24 09:05:39

The mnemonic alone is worth the answer. I don't think I'll need to look it up again!

@candy_man 2018-01-05 10:26:20

@AJQarshi @KunalSingh Just to expound on Qarshi's answer, the first argument, owner object, as he called it, is the execution context you want to pass to the function(this context). When an object is passed as argument, then the function invoked is bound to the object's execution context and any reference to members in the function will indeed point to existing object members. Hope this makes sense.

@Brain2000 2019-07-17 15:08:42

So in regards to JavaScript Proxy and the spread operator, would Handler.Call(target, that, ...args) be the same as Handler.Apply(target, that, args)?

@Pravin Divraniya 2019-09-12 07:38:38

Let me add a little detail to this.

these two calls are almost equivalent:, ...args); // pass an array as list with spread operator

func.apply(context, args);   // is same as using apply

There’s only a minor difference:

  • The spread operator ... allows passing iterable args as the list to call.
  • The apply accepts only array-like args.

So, these calls complement each other. Where we expect an iterable, call works, where we expect an array-like, apply works.

And for objects that are both iterable and array-like, like a real array, we technically could use any of them, but apply will probably be faster because most JavaScript engines internally optimize it better.

@Alireza 2017-05-11 14:35:58

The main difference is, using call, we can change the scope and pass arguments as normal, but apply lets you call it using arguments as an Array (pass them as an array). But in terms of what they to do in your code, they are pretty similar.

While the syntax of this function is almost identical to that of apply(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

So as you see, there is not a big difference, but still, there are cases we prefer using call() or apply(). For example, look at the code below, which finding the smallest and largest number in an array from MDN, using the apply method:

// min/max number in an array
var numbers = [5, 6, 2, 3, 7];

// using Math.min/Math.max apply
var max = Math.max.apply(null, numbers); 
// This about equal to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)

var min = Math.min.apply(null, numbers)

So the main difference is just the way we passing the arguments:

Call:, arg1, arg2, ...);


function.apply(thisArg, [argsArray]);

@Willem van der Veen 2018-08-29 15:29:42


Both call() and apply() are methods which are located on Function.prototype. Therefore they are available on every function object via the prototype chain. Both call() and apply() can execute a function with a specified value of the this.

The main difference between call() and apply() is the way you have to pass in arguments into it. In both call() and apply() you pass as a first argument the object you want to be the value as this. The other arguments differ in the following way:

  • With call() you have to put in the arguments normally (starting from the second argument)
  • With apply() you have to pass in array of arguments.


let obj = {
  val1: 5,
  val2: 10

const summation = function (val3, val4) {
  return  this.val1 + this.val2 + val3 + val4;

console.log(summation.apply(obj, [2 ,3]));
// first we assign we value of this in the first arg
// with apply we have to pass in an array

console.log(, 2, 3));
// with call we can pass in each arg individually

Why would I need to use these functions?

The this value can be tricky sometimes in javascript. The value of this determined when a function is executed not when a function is defined. If our function is dependend on a right this binding we can use call() and apply() to enforce this behaviour. For example:

var name = 'unwantedGlobalName';

const obj =  {
  name: 'Willem',
  sayName () { console.log(;}

let copiedMethod = obj.sayName;
// we store the function in the copiedmethod variable

// this is now window, unwantedGlobalName gets logged;
// we enforce this to be obj, Willem gets logged

@Sanjib Debnath 2016-08-11 09:25:23

The difference is that call() takes the function arguments separately, and apply() takes the function arguments in an array.

@Mahesh 2015-03-31 07:32:05

Another example with Call, Apply and Bind. The difference between Call and Apply is evident, but Bind works like this:

  1. Bind returns an instance of a function that can be executed
  2. First Parameter is 'this'
  3. Second parameter is a Comma separated list of arguments (like Call)


function Person(name) { = name; 
Person.prototype.getName = function(a,b) { 
     return + " " + a + " " + b; 

var reader = new Person('John Smith');

reader.getName = function() {
   // Apply and Call executes the function and returns value

   // Also notice the different ways of extracting 'getName' prototype
   var baseName = Object.getPrototypeOf(this).getName.apply(this,["is a", "boy"]);
   console.log("Apply: " + baseName);

   var baseName = Object.getPrototypeOf(reader), "is a", "boy"); 
   console.log("Call: " + baseName);

   // Bind returns function which can be invoked
   var baseName = Person.prototype.getName.bind(this, "is a", "boy"); 
   console.log("Bind: " + baseName());

/* Output
Apply: John Smith is a boy
Call: John Smith is a boy
Bind: John Smith is a boy

@John Slegers 2016-01-18 02:27:00

From the MDN docs on Function.prototype.apply() :

The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).


fun.apply(thisArg, [argsArray])

From the MDN docs on :

The call() method calls a function with a given this value and arguments provided individually.

Syntax[, arg1[, arg2[, ...]]])

From Function.apply and in JavaScript :

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.

Code example :

var doSomething = function() {
    var arr = [];
    for(i in arguments) {
        if(typeof this[arguments[i]] !== 'undefined') {
    return arr;

var output = function(position, obj) {
    document.body.innerHTML += '<h3>output ' + position + '</h3>' + JSON.stringify(obj) + '\n<br>\n<br><hr>';

output(1, doSomething(

output(2, doSomething.apply({one : 'Steven', two : 'Jane'}, [

output(3,{one : 'Steven', two : 'Jane'},

See also this Fiddle.

@Raghavendra 2015-11-24 08:36:02

Call and apply both are used to force the this value when a function is executed. The only difference is that call takes n+1 arguments where 1 is this and 'n' arguments. apply takes only two arguments, one is this the other is argument array.

The advantage I see in apply over call is that we can easily delegate a function call to other function without much effort;

function sayHello() {
  console.log(this, arguments);

function hello() {
  sayHello.apply(this, arguments);

var obj = {name: 'my name'}, 'some', 'arguments');

Observe how easily we delegated hello to sayHello using apply, but with call this is very difficult to achieve.

@venkat7668 2015-08-03 06:15:16

Difference between these to methods are, how you want to pass the parameters.

“A for array and C for comma” is a handy mnemonic.

@Kyll 2015-09-07 10:38:27

What does this answer provide that is not already well-provided in other answers?

@Dhana Krishnasamy 2015-02-12 18:10:05

Even though call and apply achive the same thing, I think there is atleast one place where you cannot use call but can only use apply. That is when you want to support inheritance and want to call the constructor.

Here is a function allows you to create classes which also supports creating classes by extending other classes.

function makeClass( properties ) {
    var ctor = properties['constructor'] || function(){}
    var Super = properties['extends'];
    var Class = function () {
                 // Here 'call' cannot work, only 'apply' can!!!
        Class.prototype = Object.create( Super.prototype );
        Class.prototype.constructor = Class;
     Object.keys(properties).forEach( function(prop) {
           if(prop!=='constructor' && prop!=='extends')
            Class.prototype[prop] = properties[prop];
   return Class; 

var Car = makeClass({
             constructor: function(name){
             yourName: function() {
//We have a Car class now
 var carInstance=new Car('Fiat');
carInstance.youName();// ReturnsFiat

var SuperCar = makeClass({
               constructor: function(ignore,power){
               yourPower: function() {
                    return this.power;
//We have a SuperCar class now, which is subclass of Car
var superCar=new SuperCar('BMW xy',2.6);
superCar.yourName();//Returns BMW xy
superCar.yourPower();// Returns 2.6

@jhliberty 2017-10-25 19:10:00

I believe call would work there with the spread operator as described in the selected answer. Unless I'm missing something.

@Dominykas Mostauskis 2013-12-04 12:41:08

Follows an extract from Closure: The Definitive Guide by Michael Bolin. It might look a bit lengthy, but it's saturated with a lot of insight. From "Appendix B. Frequently Misunderstood JavaScript Concepts":

What this Refers to When a Function is Called

When calling a function of the form, the object is referred to as the receiver. When the function is called, it is the receiver that is used as the value for this:

var obj = {};
obj.value = 10;
/** @param {...number} additionalValues */
obj.addValues = function(additionalValues) {
  for (var i = 0; i < arguments.length; i++) {
    this.value += arguments[i];
  return this.value;
// Evaluates to 30 because obj is used as the value for 'this' when
// obj.addValues() is called, so obj.value becomes 10 + 20.

If there is no explicit receiver when a function is called, then the global object becomes the receiver. As explained in "" on page 47, window is the global object when JavaScript is executed in a web browser. This leads to some surprising behavior:

var f = obj.addValues;
// Evaluates to NaN because window is used as the value for 'this' when
// f() is called. Because and window.value is undefined, adding a number to
// it results in NaN.
// This also has the unintentional side effect of adding a value to window:
alert(window.value); // Alerts NaN

Even though obj.addValues and f refer to the same function, they behave differently when called because the value of the receiver is different in each call. For this reason, when calling a function that refers to this, it is important to ensure that this will have the correct value when it is called. To be clear, if this were not referenced in the function body, then the behavior of f(20) and obj.addValues(20) would be the same.

Because functions are first-class objects in JavaScript, they can have their own methods. All functions have the methods call() and apply() which make it possible to redefine the receiver (i.e., the object that this refers to) when calling the function. The method signatures are as follows:

* @param {*=} receiver to substitute for 'this'
* @param {...} parameters to use as arguments to the function
* @param {*=} receiver to substitute for 'this'
* @param {Array} parameters to use as arguments to the function

Note that the only difference between call() and apply() is that call() receives the function parameters as individual arguments, whereas apply() receives them as a single array:

// When f is called with obj as its receiver, it behaves the same as calling
// obj.addValues(). Both of the following increase obj.value by 60:, 10, 20, 30);
f.apply(obj, [10, 20, 30]);

The following calls are equivalent, as f and obj.addValues refer to the same function:, 10, 20, 30);
obj.addValues.apply(obj, [10, 20, 30]);

However, since neither call() nor apply() uses the value of its own receiver to substitute for the receiver argument when it is unspecified, the following will not work:

// Both statements evaluate to NaN, 10, 20, 30);
obj.addValues.apply(undefined, [10, 20, 30]);

The value of this can never be null or undefined when a function is called. When null or undefined is supplied as the receiver to call() or apply(), the global object is used as the value for receiver instead. Therefore, the previous code has the same undesirable side effect of adding a property named value to the global object.

It may be helpful to think of a function as having no knowledge of the variable to which it is assigned. This helps reinforce the idea that the value of this will be bound when the function is called rather than when it is defined.

End of extract.

@Viktor Stolbin 2015-10-27 12:12:23

Just to note the fact, that additionalValues is not referenced inside obj.addValues body

@jhliberty 2017-10-25 19:15:42

I know you were answering the question but would like to add: you could have used bind when defining f. var f = obj.addValues; becomes var f = obj.addValues.bind(obj) and now f(20) would work without having to use call or apply every time.

@Fralcon 2020-02-07 01:14:03

I know you didn't write it, but you did highlight the text and examples from the book as relevant, and I am very grateful. They were very helpful.

@Rakesh Kumar 2014-02-28 04:57:48

Fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

@Faraz Kelhini 2014-03-13 18:52:51

@tjacks3 2014-02-25 19:31:51

It is useful at times for one object to borrow the function of another object, meaning that the borrowing object simply executes the lent function as if it were its own.

A small code example:

var friend = {
    car: false,
    lendCar: function ( canLend ){ = canLend;


var me = {
    car: false,
    gotCar: function(){
      return === true;

console.log(me.gotCar()); // false, true); 

console.log(me.gotCar()); // true

friend.lendCar.apply(me, [false]);

console.log(me.gotCar()); // false

These methods are very useful for giving objects temporary functionality.

@Michel Ayres 2014-02-25 19:50:40

To people that want to know how to see console.log check out: What is console.log and how do I use it?

@Mark Karwowski 2014-01-21 18:11:22

Call() takes comma-separated arguments, ex:

.call(scope, arg1, arg2, arg3)

and apply() takes an array of arguments, ex:

.apply(scope, [arg1, arg2, arg3])

here are few more usage examples:

@xgqfrms 2016-12-25 13:52:53

` // call() === comma-separated arguments (arguments-list) .call(this, args1, args2, args3, ...) // apply() === array of arguments (array-items) .apply(this, [arr0, arr1, arr2, ...]) `

@kmatheny 2011-11-07 17:36:45

While this is an old topic, I just wanted to point out that .call is slightly faster than .apply. I can't tell you exactly why.

See jsPerf,


Douglas Crockford mentions briefly the difference between the two, which may help explain the performance difference...

Apply takes an array of arguments, while Call takes zero or more individual parameters! Ah hah!

.apply(this, [...])

.call(this, param1, param2, param3, param4...)

@Eric Hodonsky 2012-03-01 20:30:04

This depends on what the function does with the parameters/array, if it doesn't need to process the array, does it take less time?

@Josh Mc 2012-05-11 01:42:30

Interestingly even without the array, call is still much faster.

@Vincent McNabb 2013-10-08 01:10:55

@JoshMc That would be very browser specific. In IE 11, I'm getting apply going twice as fast as call.

@joeytwiddle 2013-11-23 16:41:20

1. Creating a new array means the garbage collector will need to clean it up at some point. 2. Accessing items in the array using dereference is less efficient than accessing a variable (parameter) directly. (I believe that is what kmatheny meant by "parsing", which is actually something quite different.) But neither of my arguments explain the jsperf. That must be related to the engine's implementation of the two functions, e.g. perhaps they create an empty array anyway, if none was passed.

@Gary 2017-07-23 11:22:23

Thank you for sharing the test and video

@user669677 2013-07-05 10:56:04

I'd like to show an example, where the 'valueForThis' argument is used:

Array.prototype.push = function(element) {
   Native code*, that uses 'this'       
var array = [];
//[1, 2, 3, 4, 5, 6, 7, 8, 9] 


@Dan 2013-12-04 13:58:29

Here's a small-ish post, I wrote on this:

var obj1 = { which : "obj1" },
obj2 = { which : "obj2" };

function execute(arg1, arg2){
    console.log(this.which, arg1, arg2);

//using call, "dan", "stanhope");
//output: obj1 dan stanhope

//using apply
execute.apply(obj2, ["dan", "stanhope"]);
//output: obj2 dan stanhope

//using old school
execute("dan", "stanhope");
//output: undefined "dan" "stanhope"

@Mark Karwowski 2014-01-21 18:07:40

here is another one: but basically it is right: .call(scope, arg1, arg2, arg3)

@Praveen D 2013-11-06 11:50:46

We can differentiate call and apply methods as below

CALL : A function with argument provide individually. If you know the arguments to be passed or there are no argument to pass you can use call.

APPLY : Call a function with argument provided as an array. You can use apply if you don't know how many argument are going to pass to the function.

There is a advantage of using apply over call, we don't need to change the number of argument only we can change a array that is passed.

There is not big difference in performance. But we can say call is bit faster as compare to apply because an array need to evaluate in apply method.

@Joe 2013-09-04 13:36:59

Here's a good mnemonic. Apply uses Arrays and Always takes one or two Arguments. When you use Call you have to Count the number of arguments.

@dantheta 2013-11-03 11:40:14

Useful mnemonic right there!. I will change the 'one or two Arguments' to say 'a maximum of two Arguments' since neither the first or the second parameters of apply is required. I'm not sure though why one will call apply or call without a parameter. Looks like someone is trying to find out why here…

@notnoop 2009-12-31 19:59:36

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."


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

@angry kiwi 2011-07-29 04:01:11

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

@Ikrom 2013-06-05 05:33:59

First parameter is not required too.

@iamcastelli 2020-01-28 06:58:05

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

@Matthew Crumley 2009-12-31 21:50:40

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., a, b, c); // Fixed number of arguments

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

var args = [];
while (...) {
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, 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.

Related Questions

Sponsored Content

37 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

36 Answered Questions

[SOLVED] What is the !! (not not) operator in JavaScript?

  • 2009-04-24 08:13:58
  • Hexagon Theory
  • 525276 View
  • 2990 Score
  • 36 Answer
  • Tags:   javascript operators

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

67 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

34 Answered Questions

[SOLVED] What's the difference between using "let" and "var"?

32 Answered Questions

[SOLVED] What's the difference between a method and a function?

10 Answered Questions

[SOLVED] Improve INSERT-per-second performance of SQLite?

13 Answered Questions

[SOLVED] event.preventDefault() vs. return false

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

  • 2014-05-09 16:16:57
  • Mathew MacLean
  • 238755 View
  • 2761 Score
  • 19 Answer
  • Tags:   javascript html css

8 Answered Questions

[SOLVED] What is the difference between Bower and npm?

  • 2013-09-05 16:53:19
  • Games Brainiac
  • 312064 View
  • 1745 Score
  • 8 Answer
  • Tags:   javascript npm bower

Sponsored Content