# 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.

```javascript
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

```javascript
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

```javascript
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

```javascript
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.
    

```javascript
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740894690440/d0f0d3de-13ae-4c73-862d-0ee265c8588d.png align="center")