call and apply in JavaScript

Both the call and apply methods in JavaScript are used to invoke a function with a specific this value and a set of arguments. However, they differ in how they pass arguments to the function. Let's explore the differences between call and apply with examples:

The call Method

The call method is used to call a function with a given this value and arguments provided individually. The arguments are passed as a comma-separated list after the this value.

function greet(name) { console.log(`Hello, ${name}! My name is ${this.name}.`); } const person = { name: "Mac", }; greet.call(person, "Mary"); // Output: Hello, Mary! My name is Mac.

The apply Method

The apply method is similar to call, but it accepts arguments as an array or an array-like object. The array is unpacked, and its elements are passed as individual arguments to the function.

function introduce(age, city) { console.log(`I am ${this.name}, ${age} years old, living in ${city}.`); } const person = { name: "Mary", }; introduce.apply(person, [25, "New York"]); // Output: I am Mary, 25 years old, living in New York.

Differences and Use Cases

Argument Format

  1. call: Accepts arguments individually after the this value.
  2. apply: Accepts arguments as an array or array-like object.

Array Unpacking

  1. call: Arguments are passed individually.
  2. apply: Arguments are unpacked from an array-like object.

Number of Arguments

  1. call: The number of arguments must match the number of parameters in the function.
  2. apply: The number of arguments can vary as long as the array-like object contains the required number of elements.

Choosing Between Them

  1. Use call when you know the exact number of arguments and can provide them individually.
  2. Use apply when you have arguments stored in an array or array-like object and want to pass them as separate arguments.
// Using call to calculate the maximum value in an array const numbers = [4, 9, 2, 7]; const max = Math.max.call(null, ...numbers); console.log(max); // Output: 9 // Using apply to calculate the maximum value in an array const max = Math.max.apply(null, numbers); console.log(max); // Output: 9

Conclusion

Both call and apply are used to set the this value and invoke a function with specific arguments. The choice between them depends on whether you have arguments in individual variables or an array-like object.






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