Call, Bind, Apply - Deep Dive

Call, Bind and Apply are the ways to run a function, they all do it very differently the same work, which one to use depends upon the condition and your use-cases.

Call →

1️⃣ Using .call() – Invoke a Function with a Specific Context

.call(thisArg, arg1, arg2, ...) is useful when:

• You need to execute a function immediately with a specific this value.

• You want to borrow methods from one object for another.

Call invokes the function immediately with a given this value and arguments passed individually.

Function hoisting only works to direct function calls but when we are using .call() javascript does not know what mainFun is at the point before decleration.

const person1 = {
  name: "Alice",
  greet: function (city, country) {
    console.log(`Hello, I am ${this.name} from ${city}, ${country}`);
  }
};

const person2 = { name: "Bob" };

person1.greet.call(person2, "New York", "USA"); 
// Output: Hello, I am Bob from New York, USA

👉 Here, we borrowed greet() from person1 and used it for person2.

Inheriting a constructor function

function Animal(name) {
  this.name = name;
}

function Dog(name, breed) {
  Animal.call(this, name); // Call Animal constructor with Dog's this
  this.breed = breed;
}

const dog1 = new Dog("Buddy", "Golden Retriever");
console.log(dog1); 
// Output: { name: "Buddy", breed: "Golden Retriever" }

👉 Here, Dog is calling Animal using .call() to inherit the name property.

Side note :- We use the new keyword when we want to store something in the heap memory.

---

2️⃣ Using .apply() – Pass Arguments as an Array

Apply works like call(), but takes arguments as an array instead of individual values.

.apply(thisArg, [arg1, arg2, ...]) is useful when:

• You need to pass an array of arguments dynamically.

• you want to use Math functions on arrays.

Example: Using Math.max( ) with an Array

const numbers = [5, 12, 8, 20, 2];
const maxNumber = Math.max.apply(null, numbers);
console.log(maxNumber);

👉 Here, we use .apply() to pass an array to Math.max(), which normally takes separate arguments.

Using apply() for Function Borrowing

const person = {
  name: "Charlie",
  introduce: function (age, profession) {
    console.log(`I am ${this.name}, ${age} years old, working as a ${profession}.`);
  }
};

const anotherPerson = { name: "Daniel" };

person.introduce.apply(anotherPerson, [28, "Engineer"]); 
// Output: I am Daniel, 28 years old, working as a Engineer.

👉 Same as .call(), but arguments are passed as an array.

---

3️⃣ Using .bind() – Create a New Function with Pre-set Context

.bind(thisArg, arg1, arg2, ...) is useful

• You want to create a new function with a specific this context.

• You want to partially apply some arguments.

const car = {
  brand: "Tesla",
  getBrand: function () {
    console.log(this.brand);
  }
};

const getTeslaBrand = car.getBrand.bind(car);
getTeslaBrand(); 
// Output: Tesla

👉 bind() creates a new function getTeslaBrand that will always use car as this.

Does not execute the function immediately but returns a new function with a bound this value, which can be executed later.