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.