JavaScript - Function call()

The JavaScript call() method is used to explicitly invoke a function with a specific this value and pass arguments individually. This allows you to borrow methods from other objects or control the value of this when calling a function.

Syntax

functionName.call(thisArg, arg1, arg2, ...);

functionName: The function to invoke.

thisArg: The value to use as this inside the function.

arg1, arg2, ...: Arguments to pass to the function.

Example 1: Changing this Context

const person = {

  firstName: "John",

  lastName: "Doe",

  fullName: function () {

    return `${this.firstName} ${this.lastName}`;

  }

};

const anotherPerson = {

  firstName: "Jane",

  lastName: "Smith"

};

console.log(person.fullName.call(anotherPerson)); // Output: Jane Smith

Here, call() invokes the fullName method of the person object but sets this to anotherPerson.

Example 2: Borrowing Methods

You can use call() to borrow methods from one object for use with another.

const numbers = [5, 6, 2, 8, 3];

const max = Math.max.call(null, ...numbers);

console.log(max); // Output: 8

Here, the Math.max function is called with an array of numbers using call() and the spread operator.

Example 3: Using Arguments with call()

function introduce(greeting, punctuation) {

  console.log(`${greeting}, I am ${this.name}${punctuation}`);

}

const person = { name: "Alice" };

introduce.call(person, "Hello", "!"); // Output: Hello, I am Alice!

Difference Between call() and apply()

call(): Passes arguments individually.

apply(): Passes arguments as an array.

function sum(a, b, c) {

  return a + b + c;

}

console.log(sum.call(null, 1, 2, 3));   // Output: 6 (individual arguments)

console.log(sum.apply(null, [1, 2, 3])); // Output: 6 (array of arguments)

Example 4: Using call() for Inheritance

function Animal(type) {

  this.type = type;

}

function Dog(name) {

  Animal.call(this, "Dog");

  this.name = name;

}

const myDog = new Dog("Buddy");

console.log(myDog.type); // Output: Dog

console.log(myDog.name); // Output: Buddy

Here, call() is used to invoke the Animal constructor within the Dog constructor, allowing inheritance of properties.

Example 5: Array-Like Objects

You can use call() to convert array-like objects (e.g., arguments) into arrays.

function getArgs() {

  return Array.prototype.slice.call(arguments);

}

console.log(getArgs(1, 2, 3)); // Output: [1, 2, 3]

Key Points to Remember

Sets this Context: The primary purpose of call() is to set the value of this explicitly.

Individual Arguments: Unlike apply(), call() requires arguments to be passed individually.

Common Use Cases:

Borrowing methods from other objects.

Invoking functions on array-like objects.

Supporting inheritance in constructors.

Practical Applications

Borrowing Methods for DOM Elements:

const elements = document.querySelectorAll("div");

Array.prototype.forEach.call(elements, function (el) {

  console.log(el.tagName);

});

Overriding this in Callbacks:

function greet() {

  console.log(this.name);

}

const user = { name: "Alex" };

setTimeout(greet.call.bind(greet, user), 1000); // Output: Alex