Difference between .call and .apply

In JavaScript, everything are objects , even Functions, and every objects has their properties and methods. Both .apply and .call are methods of Function object. Still, many people get confused with these two functions in JavaScript. Basically, they differ on how they handle function arguments . Both functions allow you to control the meaning of 'this' inside the called function, but the difference is in how arguments are passed to the function. 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.

.call()

It calls a function with given values and arguments provided individually

example
foo.call(obj, arg1, arg2, arg3)

.apply()

It calls a function with given values and arguments provided as an array or array object. example
foo.apply(obj, [arg1, arg2, arg3])
The first argument, in both cases, is the object reference that will represent 'this' inside the called function. So that's the difference between call and apply. Both can be called on functions, which they run in the context of the first argument. In call the subsequent arguments are passed in to the function as they are, while apply expects the second argument to be an array that it unpacks as arguments for the called function. Let's see an example which will make it clearer. example
var StudentName = { createName: function(firstName, middleName, lastName){ return firstName + ' ' + middleName + ' '+ lastName; } }; function displayName(firstName,middleName,lastName){ document.write(this.createName(firstName,middleName,lastName)); } //comma separated list or arguments displayName.call(StudentName,'John','Villa','Doe'); //arguments are passed as an array var nameArr = ['John', 'Villa','Doe']; displayName.apply(StudentName,nameArr);
output
John Villa Doe John Villa Doe





Related Topics
  1. JavaScript Interview Questions (Part2)
  2. JavaScript Interview Questions (Part3)
  3. Is JavaScript a true OOP language?
  4. Advantages and Disadvantages of JavaScript
  5. Difference Between JavaScript and ECMAScript?
  6. What is noscript tag?
  7. Escaping Special Characters in JavaScript
  8. What is undefined x 1 in JavaScript?
  9. JavaScript : Logical Operators
  10. Difference between '=', '==' and '===' operators?
  11. How to reload a page using JavaScript?
  12. How to write html code dynamically using JavaScript?
  13. How to add html elements dynamically with JavaScript?
  14. How to load another html page from javascript?
  15. What Is The Disadvantages Using InnerHTML In JavaScript?
  16. What is Browser Object Model
  17. How to detect the OS on the client machine in JavaScript?
  18. Difference between window, document, and screen in Javascript?
  19. Difference between the substr() and substring() in JavaScript?
  20. How to replace all occurrences of a string in JavaScript?
  21. How to test a string as a literal and as an object ?
  22. What is Associative Array? How do we use it?
  23. What is an anonymous function in JavaScript?
  24. What is the use of 'bind' method in JavaScript?
  25. Pure functions Vs. Impure functions in javascript
  26. Is Javascript a Functional Programming Language?
  27. What's the Difference Between Class and Prototypal Inheritance?
  28. Javascript, Pass by Value or Pass by Reference?
  29. How to prevent modification of an object in Javascript?
  30. What is 'this' keyword in JavaScript?
  31. How Does Function Hoisting Work in JavaScript?
  32. What do mean by NULL in Javascript?
  33. What does the delete operator do in JavaScript?
  34. What is the Infinity property used for in Javascript?
  35. Event bubbling and Event Capturing in JavScript?
  36. What is "strict mode" and how is it used in JavaScript?
  37. Entire content of a JavaScript source file in a function block?
  38. What is an immediately-invoked function expression?
  39. What is escape & unescape String functions in JavaScript?
  40. What is the instanceof operator in JavaScript?
  41. What Are RESTful (REpresentational State Transfer)Web Services?
  42. What is Unobtrusive JavaScript & Why it's Important?
  43. What Does JavaScript Void(0) Mean?
  44. What are JavaScript Cookies?
  45. Difference between Client side JavaScript and Server side JavaScript
  46. TypeError: document.getelementbyid(...) is null
  47. Uncaught TypeError: Cannot read property of undefined In JavaScript
  48. What's the difference between Null and Undefined?