What is the use of the call() method in JavaScript?

JavaScript is a versatile language that offers several methods to manipulate objects and functions. One such method is the call() method, which is used to call a function with a specific this value and arguments passed individually. This method allows you to reuse a function while changing its execution context.

In this article, we will explore the call() method and understand its uses.

Syntax of the `call()` method

The call() method is used to invoke a function and has the following syntax:

function.call(thisArg, arg1, arg2, ...)

The thisArg parameter is the value that will be passed as this to the function. The arg1, arg2, etc. parameters are the arguments that will be passed to the function. The call() method can be used with any function, even with the built-in functions.

Usage of `call()` method:

Changing the `this` context using `call()`:

One of the primary uses of the call() method is to change the this context of a function. When a function is called, this refers to the object that the function is a property of. However, using call(), we can override the this context and pass any object as the context.

For example:

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function () {
    console.log(this.firstName + " " + this.lastName);
  },
};

const anotherPerson = {
  firstName: "Jane",
  lastName: "Doe",
};

person.fullName.call(anotherPerson);

In this example, we have two objects, person and anotherPerson. The person object has a fullName() method that logs the full name of the person. We are using call() to invoke the fullName() method on anotherPerson. As a result, this inside the fullName() method refers to anotherPerson, and the method logs the full name of anotherPerson.

Passing arguments to the function using `call()`:

The call() method allows us to pass arguments to the function being called. The arguments are passed as individual parameters after the thisArg parameter.

For example:

function greeting(greeting, name) {
  console.log(greeting + " " + name);
}

greeting.call(null, "Hello", "John");

In this example, we have a greeting() function that takes two arguments, greeting and name. We are using call() to invoke the greeting() function and passing null as the thisArg parameter. We are also passing "Hello" and "John" as the individual arguments to the function. The greeting() function logs "Hello John".

Using `call()` with function borrowing

Another use case of the call() method is function borrowing. Function borrowing is a pattern where you borrow a function from another object and invoke it with a specific this value. This pattern is commonly used in object-oriented programming.

For example:

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function () {
    console.log(this.firstName + " " + this.lastName);
  },
};

const anotherPerson = {
  firstName: "Jane",
  lastName: "Doe",
};

person.fullName.call(anotherPerson);

In this example, we have two objects, person and anotherPerson. The person object has a fullName() method that logs the full name of the person. We are using call() to invoke the fullName() method on anotherPerson. By doing this, we are borrowing the fullName() method from the person object and invoking it on anotherPerson. The fullName() method logs the full name of anotherPerson.

Using `call()` with constructors:

The call() method can also be used with constructor functions. Constructor functions are used to create new objects with a common structure.

For example:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.fullName = function () {
    console.log(this.firstName + " " + this.lastName);
  };
}

const person1 = new Person("John", "Doe");
const person2 = new Person("Jane", "Doe");

person1.fullName.call(person2);

In this example, we have a Person constructor function that takes firstName and lastName as parameters and creates an object with a fullName() method. We are creating two instances of the Person object, person1 and person2.

We are using call() to invoke the fullName() method of person1 with the this context of person2. By doing this, we are calling the fullName() method of person1 on person2, and the method logs the full name of person2.