Click here to Skip to main content
15,887,214 members
Articles / Programming Languages / Javascript
Tip/Trick

Difference Between .call() and .apply() in Javascript

Rate me:
Please Sign up or sign in to vote.
4.50/5 (7 votes)
7 Oct 2014CPOL1 min read 12K   5   5
Introduction There is always a confusion in .call() and .apply(). Where to use when? Why we need to call a function using .call() and .apply(),  even if, we can directly call that function ? For Instance :someFunction.call() and someFunc.apply() But we can directly call the function by someFunction(

Introduction

There is always a confusion in .call() and .apply(). Where to use when?
Why we need to call a function using .call() and .apply(),  even if, we can directly call that function ?

For Instance :someFunction.call() and someFunc.apply()
But we can directly call the function by someFunction().
Because JavaScript functions rely on their scope.

var person = {name: 'Mac', age: 25};

var sayHello = function() {
                   alert('Hello, ' + this.name);
               }

In the above code, if we call the function directly.

sayHello(); // it will give you unexpected result

Again if ‘strict mode’ is on then it will give you an error…

TypeError: this is undefined

But if we call like…

sayHello.call(person); //Hello,Mac
sayHello.apply(person); //Hello,Mac

Lets have a look on the difference

.call()

It calls a function with given values and arguments provided individually

  • It takes the parameter as comma separated.
  • It looks like :- testfunction.call(valueForThis, arg1, arg2, ...);

Tip : When To use .call() – When you know the number of arguments to be passed.
Example :

var maxNum = Math.max.call(null, 45, 34, 23, 109, 345, 567);
document.write(maxNum)​ // output is 567

Advantage : when we call a function with out argument or fixed argument.

.apply()

  • It calls a function with given values and arguments provided as an array or array object.
  • It  takes the argument for this value and an array of object, basically apply expects its 2nd  argument as an array.
  • It looks like :- testfunction.apply(valueForThis, [arrayOfArgs]);

Tip : When To use .apply() – When you don’t know the number of arguments to be passed to that function.
Example :

var numarr = [45, 34, 23, 109, 345, 567];
var maxNum = Math.max.apply(null, numarr); //second argument expecting an array
console.log(maxNum); // output is 567

Advantage: We are getting an advantage of using .apply() because here we don’t need to check the number of arguments to call a function.

Conclusion

Both these have their pros and cons so their should no confusion what to use when while using.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
India India
Software Engineer | Blogger | Reader| Music Lover | Cook | Traveler | Foodie

Comments and Discussions

 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun8-Oct-14 17:03
Humayun Kabir Mamun8-Oct-14 17:03 
GeneralMy vote of 2 Pin
Cosmic Turnip8-Oct-14 9:44
Cosmic Turnip8-Oct-14 9:44 
GeneralRe: My vote of 2 Pin
Neil Diffenbaugh9-Oct-14 2:13
Neil Diffenbaugh9-Oct-14 2:13 
GeneralRe: My vote of 2 Pin
Cosmic Turnip20-Oct-14 8:47
Cosmic Turnip20-Oct-14 8:47 
Questionabout topic Pin
sankarsan parida7-Oct-14 7:20
professionalsankarsan parida7-Oct-14 7:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.