call, bind, and apply Methods Unveiled in JavaScript

1. bind()

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.

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.

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

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

Explanation:

• This is our buddy person2, who's a bit different from Manikandan but equally cool!

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

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!

1. 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!

---

2. call()

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.

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.

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

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

Explanation:

• Meet our ally, ally, ready to embark on a different adventure.

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

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.

---

3. apply()

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.

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.

---

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

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

Explanation:

• Meet our ally, ally, ready to embark on a different adventure.

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

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.