Introduction

The call, apply, and bind are used to invoke a function with specific value and argument. This method is part of the Functional Prototype. Let's learn all these three topic one by one.

Call

Let us consider the following code

let student = {
    firstName: "shivam",
    lastName: "gupta",
    getEmail: function () {
        return `${this.firstName}${this.lastName}@gmail.com`;
    }
};
console.log(student.getEmail()); // ouput : shivamgupta@gmail.com


let teacher = {
    firstName: "john",
    lastName: "wick"
    getEmail: function () {
        return `${this.firstName}${this.lastName}@gmail.com`;
    }
};
console.log(teacher.getEmail()); // ouput : johnwick@gmail.com

In the above code, we can use the call method to invoke the getEmail to the teacher object. In this way, we can use the getEmail method for different objects. Here is the illustration

Method 1

let student = {
    firstName: "shivam",
    lastName: "gupta",
    getEmail: function () {
        return `${this.firstName}${this.lastName}@gmail.com`;
    }
};


let teacher = {
    firstName: "john",
    lastName: "wick"
};

console.log(student.getEmail.call(teacher)); // Output: johnwick@gmail.com

//By this way we use the call method to reduce the line of code

Method 2

let student = {
    firstName: "shivam",
    lastName: "gupta",
};


let teacher = {
    firstName: "john",
    lastName: "wick"
};
function getEmail(){
     return `${this.firstName}${this.lastName}@gmail.com`;
    }
console.log(getEmail.call(teacher)); // Output: johnwick@gmail.com
console.log(getEmail.call(teacher)); //shivamgupta@gmail.com

Method 3: We can also pass several arguments in the call method. Let's take an example if we want to give a parameter to the teacher about what subject he can teach then we make a function of name chooseSubject

let student = {
    firstName: "shivam",
    lastName: "gupta",
};


let teacher = {
    firstName: "john",
    lastName: "wick"
};

function chooseSubject(sub1){
    return (sub1)
}
console.log(chooseSubject.call(teacher, "maths") //output : maths

Apply:

The apply method is similar to the call method but it accepts argument as an array or an array-like object. Let's check out the following example

function greet(greeting) {
    console.log(greeting + " " + this.firstName + " " + this.lastName);
}

let student = {
    firstName: "Shivam",
    lastName: "Gupta"
};

let teacher = {
    firstName: "John",
    lastName: "Wick"
};

// Using apply to set the context and provide arguments as an array
greet.apply(student, ["Hello"]);  // Output: Hello Shivam Gupta

// Using apply with a different context
greet.apply(teacher, ["Hi"]);     // Output: Hi John Wick

Bind

The bind method is very different from call and apply because this function did not invoke the function but instead, it created a new function. It helps to call the function when we need it Let us understand it by an example

let student = {
    firstName: "shivam",
    lastName: "gupta",
};


let teacher = {
    firstName: "john",
    lastName: "wick"
};
function getEmail(){
     return `${this.firstName}${this.lastName}@gmail.com`;
    }
console.log(getEmail.bind(teacher)); 


// ouput :: 
// getEmail(){ return `${this.firstName}${this.lastName}@gmail.com` };

In summary, bind creates a new function with a fixed this value, call and apply invoke the function immediately with a specified value and arguments.