call, bind, and apply Methods Unveiled in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2024-03-19 07:21:02

## <u>1. bind()</u>

As per MDN,
The bind() method of Function instances creates a new function that, when called, calls this function with its this keyword set to the provided value, and a given sequence of arguments preceding any provided when the new function is called.

**Setting the Scene:**
   Imagine we have a friend named "Manikandan" who loves coding. We want to create a special message function for him.

```javascript
const person = {
    fname: "Manikandan",
    lname: "kathiresan",
    age: 25,
    greet: function () {
        console.log(`Hi, Welcome ${this.fname}`);
    },
    getInfo: function (city, role) {
        console.log(`Hi, This is ${this.fname}. I am from ${city}. I am  ${role}`)
    }
}
```

Explanation:
- We have this friend named `person`, and we've given him some cool features like saying "hi" and telling us some information about himself.

2. **Meet Another Friend:**
   Now, let's meet another friend named "Aravind". He's also awesome, but we want to use the same special message function we made for Manikandan for Aravind too.

```javascript
const person2 = {
    fname: 'Aravind',
    lname: 'Kathiresan'
}
```

Explanation:
- This is our buddy `person2`, who's a bit different from Manikandan but equally cool!


3. **Time to Use the Bind Magic:**
   Here comes the exciting part! We're going to use something called the "bind" method to make our special message function work for Aravind too.

```javascript
const bindMethod = person.getInfo.bind(person2);
console.log(bindMethod) // [Function: bound getInfo]
bindMethod('Dindigul', 'Software Engineer');
```

Explanation:
- With the "bind" magic, we're basically saying, "Hey, make this special message function work for Aravind as well!"
- When we use `bindMethod`, it's like using our special message function, but it's talking about Aravind instead of Manikandan!


4. **Let's Wrap It Up:**
   So, what did we learn? The "bind" method helps us make cool functions and use them for different friends or things in our code. It's like making a superpower that we can share with anyone we want!

---


## <u>2. call()</u>

As described by the wise sages at MDN,
The call() method of Function instances invokes the function and sets its this value to a provided value, along with any additional arguments passed to it.

1. **Setting Sail:**
   Picture a valiant hero named "Manikandan", skilled in the art of coding. We're about to bestow upon him a powerful skill.

```javascript
const hero = {
    name: "Manikandan",
    level: 25,
    greet: function () {
        console.log(`Greetings, fellow adventurer! I am ${this.name}`);
    },
    questInfo: function (location, objective) {
        console.log(`Attention, brave souls! Our quest takes us to ${location} to ${objective}.`)
    }
}
```

Explanation:
- Behold our hero, `hero`, with prowess in greeting fellow adventurers and sharing quest details.


2. **Encountering a New Ally:**
   Along our voyage, we meet a new ally named "Aravind". Equally brave, we wish to share our hero's abilities with this noble companion.

```javascript
const ally = {
    name: 'Aravind',
    level: 20,
}
```

Explanation:
- Meet our ally, `ally`, ready to embark on a different adventure.

3. **Setting Course for Adventure:**
   Prepare yourselves for a magical moment! We're invoking the call spell to share our hero's abilities with our new ally, along with specific parameters.

```javascript
hero.questInfo.call(ally, 'Mysterious Forest', 'uncover the ancient artifact');
```

Explanation:
- With the call spell, our hero extends his wisdom to our ally!
- As we invoke `hero.questInfo.call(ally, 'Mysterious Forest', 'uncover the ancient artifact')`, our ally receives guidance tailored to their journey.

---

## <u>3. apply()</u>

As described by the wise wizards at MDN,
The apply() method of Function instances invokes the function and sets its this value to a provided value, along with an array or array-like object of arguments.

1. **Setting Sail:**
   Picture a valiant hero named "Manikandan", skilled in the art of coding. We're about to bestow upon him a powerful skill.

```javascript
const hero = {
    name: "Manikandan",
    level: 25,
    greet: function () {
        console.log(`Greetings, fellow adventurer! I am ${this.name}`);
    },
    questInfo: function (location, objective) {
        console.log(`Attention, brave souls! Our quest takes us to ${location} to ${objective}.`)
    }
}
```

Explanation:
- Behold our hero, `hero`, with prowess in greeting fellow adventurers and sharing quest details.

---

2. **Encountering a New Ally:**
   Along our voyage, we meet a new ally named "Aravind". Equally brave, we wish to share our hero's abilities with this noble companion.

```javascript
const ally = {
    name: 'Aravind',
    level: 20,
}
```

Explanation:
- Meet our ally, `ally`, ready to embark on a different adventure.

3. **Setting Course for Adventure:**
   Prepare yourselves for a magical moment! We're invoking the apply spell to share our hero's abilities with our new ally, along with specific parameters.

```javascript
hero.questInfo.apply(ally, ['Mysterious Forest', 'uncover the ancient artifact']);
```

Explanation:
- With the apply spell, our hero extends his wisdom to our ally!
- As we invoke `hero.questInfo.apply(ally, ['Mysterious Forest', 'uncover the ancient artifact'])`, our ally receives guidance tailored to their journey.

---

At Simply, 
**Bind Method:** 
Employ bind to create a new function with a fixed this value, establishing a permanent connection between the function and its context.

**Call Method:**
Use call to directly invoke a function with a specified this value, along with arguments, enabling method borrowing and flexible function invocation.

**Apply Method:**
Utilize apply to invoke a function with a specified this value and **an array of arguments**, facilitating dynamic parameter passing and versatile function invocation.