Understanding the Usage of call() and apply() in JavaScript

In JavaScript, call() and apply() are two functions that serve a specific purpose: calling a function and setting its this value.

To fully grasp their functionality, it is important to have a good understanding of the this variable in JavaScript. You can refer to my comprehensive “this” guide to gain in-depth knowledge about this particular variable.

The this value in a function is determined by the environment and normally cannot be altered from the outside. However, call() and apply() allow you to pass an additional object that will be used as the this value when the function is invoked.

Although call() and apply() achieve the same goal, they differ in terms of how parameters are passed to the function. With call(), you can provide the function parameters as a comma-separated list, allowing you to pass as many parameters as necessary. On the other hand, apply() requires a single array that contains the parameters.

Let’s take a look at an example that demonstrates the usage of call() and apply():

const car = {
  brand: 'Ford',
  model: 'Fiesta'
};

const drive = function(from, to, kms) {
  console.log(`Driving for ${kms} kilometers from ${from} to ${to} with my car, a ${this.brand} ${this.model}`);
};

drive.call(car, 'Milan', 'Rome', 568); // Using call() with comma-separated parameters
drive.apply(car, ['Milan', 'Rome', 568]); // Using apply() with an array of parameters

It’s important to note that call() and apply() are only compatible with regular functions. Arrow functions, for instance, do not bind their own this value, so this method won’t work with them.

In conclusion, call() and apply() are powerful tools in JavaScript that allow you to control the this value when calling a function. By understanding their differences, you can utilize them effectively in your code.