What is the difference between call and apply

Question

What is the difference between using call and apply 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

User · Answer

I d like to show an example  where the  valueForThis  argument is used   Array prototype push   function element             Native code   that uses  this            this put element           var array       array push 1   array push apply array  2 3    Array prototype push apply array  4 5    array push call array 6 7   Array prototype push call array 8 9      1  2  3  4  5  6  7  8  9       details  http   es5 github io  x15 4 4 7

User · Answer

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                     if Super                      Super apply this arguments                      ctor apply this arguments                          if Super           Class prototype   Object create  Super prototype            Class prototype constructor   Class              Object keys properties  forEach  function prop               if prop    constructor   amp  amp  prop    extends               Class prototype prop    properties prop               return Class        Usage var Car   makeClass                constructor  function name                            this name name                                          yourName  function                          return this name                                       We have a Car class now  var carInstance new Car  Fiat    carInstance youName      ReturnsFiat  var SuperCar   makeClass                  constructor  function ignore power                        this power power                                      extends Car                 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

User · Answer

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  http   jsperf com test-call-vs-apply 3     UPDATE    Douglas Crockford mentions briefly the difference between the two  which may help explain the performance difference    http   youtu be ya4UHuXNygM t 15m52s  Apply takes an array of arguments  while Call takes zero or more individual parameters  Ah hah    apply this           call this  param1  param2  param3  param4

User · Answer

Let me add a little detail to this   these two calls are almost equivalent   func call context     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

User · Answer

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   hello call obj   some    arguments      Observe how easily we delegated hello to sayHello using apply  but with call this is very difficult to achieve

User · Answer

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   http   blog i-evaluation com 2012 08 15 javascript-call-and-apply

User · Answer

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 foo bar baz    the object foo bar 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  lt  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  obj addValues 20     If there is no explicit receiver when a function is called  then the global object becomes the receiver  As explained in  goog global  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  f 20      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    Function prototype call         param      receiver to substitute for  this     param  Array  parameters to use as arguments to the function    Function prototype apply    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  f call obj  10  20  30   f apply obj   10  20  30      The following calls are equivalent  as f and obj addValues refer to the same function   obj addValues call obj  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 obj addValues call undefined  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

User · Answer

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  quot A for array and C for comma  quot  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   x000D   x000D  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 x000D   x000D   x000D

User · Answer

Both call and apply the same way  It calls immediately when we use call and apply  Both call and apply takes  quot this quot  parameter as the first argument and the second argument only differs  the call takes the arguments of the functions as a list   comma   Apply takes the arguments of the functions as an array  You can find the complete difference between bind  call  and apply in the bellow youtube video  https   www youtube com watch v G-EfxnG0DtY amp t 180s

User · Answer

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

User · Answer

A well explained by flatline  I just want to add a simple example  which makes it easy to understand for beginners   func call context  args1   args2       pass arguments as     saprated value  func apply context   args1   args2           pass arguments as  Array    we also use  Call  and  Apply  method for changing  reference as defined in code below    x000D   x000D      let Emp1     x000D          name   X   x000D          getEmpDetail  function  age  department    x000D              console log  Name     this name     Age     age     Department     department  x000D            x000D        x000D      Emp1 getEmpDetail 23   Delivery   x000D   x000D         1st approch of chenging  this  x000D      let Emp2     x000D          name   Y   x000D          getEmpDetail  Emp1 getEmpDetail x000D        x000D      Emp2 getEmpDetail 55   Finance   x000D   x000D         2nd approch of changing  this  using  Call  and  Apply  x000D      let Emp3     x000D          name   Z   x000D        x000D   x000D      Emp1 getEmpDetail call Emp3  30   Admin           x000D     here we have change the ref from   Emp1 to Emp3    object x000D     now this will print  Name    X  because it is pointing to Emp3 object x000D      Emp1 getEmpDetail apply Emp3   30   Admin       x000D   x000D   x000D

User · Answer

The call   method calls a function with a given this value and arguments provided individually  apply   - Similar to the call   method  the first parameter in the apply   method sets the this value which is the object upon which the function is invoked  In this case  it s the obj object above  The only difference between the apply   and call   method is that the second parameter of the apply   method accepts the arguments to the actual function as an array

User · Answer

The difference is that call   takes the function arguments separately  and apply   takes the function arguments in an array

User · Answer

Summary   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    Example    x000D   x000D  let obj     x000D    val1  5  x000D    val2  10 x000D    x000D   x000D  const summation   function  val3  val4    x000D    return  this val1   this val2   val3   val4  x000D    x000D   x000D  console log summation apply obj   2  3     x000D     first we assign we value of this in the first arg x000D     with apply we have to pass in an array x000D   x000D   x000D  console log summation call obj  2  3    x000D     with call we can pass in each arg individually x000D   x000D   x000D    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    x000D   x000D  var name    unwantedGlobalName   x000D   x000D  const obj      x000D    name   Willem   x000D    sayName      console log this name    x000D    x000D   x000D   x000D  let copiedMethod   obj sayName  x000D     we store the function in the copiedmethod variable x000D   x000D   x000D   x000D  copiedMethod    x000D     this is now window  unwantedGlobalName gets logged x000D   x000D  copiedMethod call obj   x000D     we enforce this to be obj  Willem gets logged x000D   x000D   x000D

User · Answer

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

User · Answer

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        Syntax  fun apply thisArg   argsArray      From the MDN docs on Function prototype call         The call   method calls a function with a given this value and arguments provided individually       Syntax  fun call thisArg   arg1   arg2              From Function apply and Function call 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     x000D   x000D  var doSomething   function     x000D      var arr       x000D      for i in arguments    x000D          if typeof this arguments i        undefined     x000D              arr push this arguments i     x000D            x000D        x000D      return arr  x000D    x000D   x000D  var output   function position  obj    x000D      document body innerHTML      lt h3 gt output     position     lt  h3 gt     JSON stringify obj      n lt br gt  n lt br gt  lt hr gt    x000D    x000D   x000D  output 1  doSomething  x000D       one   x000D       two   x000D       two   x000D       one  x000D      x000D   x000D  output 2  doSomething apply  one    Steven   two    Jane      x000D       one   x000D       two   x000D       two   x000D       one  x000D       x000D   x000D  output 3  doSomething call  one    Steven   two    Jane    x000D       one   x000D       two   x000D       two   x000D       one  x000D      x000D   x000D   x000D    See also this Fiddle

User · Answer

call   It   s a predefined method in javascript  This method invokes a method  function  by specifying the owner object    function sayHello      return  quot Hello  quot    this name             var obj    name   quot Sandy quot             sayHello call obj               Returns  quot Hello Sandy quot   Call accepts argument function saySomething message     return this name    quot  is  quot    message             var person4    name    quot John quot             saySomething call person4   quot awesome quot       Returns  quot John is awesome quot       apply   The apply method is similar to the call   method  The only difference is that  call   method takes arguments separately whereas  apply   method takes arguments as an array  example function saySomething message     return this name    quot  is  quot    message             var person4    name    quot John quot             saySomething apply person4    quot awesome quot

User · Answer

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

User · Answer

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

User · Answer

Another example with Call  Apply and Bind  The difference between Call and Apply is evident  but Bind works like this    Bind returns an instance of a function that can be executed First Parameter is  this  Second parameter is a Comma separated list of arguments  like Call        function Person name        this name   name     Person prototype getName   function a b          return this name         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  getName call this   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        reader getName       Output Apply  John Smith is a boy Call  John Smith is a boy Bind  John Smith is a boy

User · Answer

Here s a small-ish post  I wrote on this   http   sizeableidea com call-versus-apply-javascript   var obj1     which    obj1     obj2     which    obj2      function execute arg1  arg2       console log this which  arg1  arg2        using call execute call obj1   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

User · Answer

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

User · Answer

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    function call thisArg  arg1  arg2          Apply    function apply thisArg   argsArray

User · Answer

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          this car   canLend           var me         car  false      gotCar  function          return this car     true          console log me gotCar        false  friend lendCar call me  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

User · Answer

Difference between these to methods are  how you want to pass the parameters      A for array and C for comma    is a handy mnemonic

[javascript] What is the difference between call and apply?

Examples related to javascript

Examples related to performance

Examples related to function

Examples related to dynamic