JavaScript Call Apply and Bind Methods

bind() :

In javascript, bind() method creates a new function, when we call that function, then this keyword of that function set to the provided value.

This is truely powerful.Using bind() we can explicitly define the value of this when calling a function. 

var person = {
firstname:’Karan’
lastname: 'singh’
getFullName: function() {
var fullname = this.firstname + ' ' + this.lastname;
return fullname;
}
};
var personeName = function() {
console.log(this.getFullName() + 'Please come!');
};var logPerson = personeName.bind(person); // creates new object and binds person. 'this' of person === person now
logPerson(); // 'Karan singh Please come!'

When we use the bind() method:

• the JS engine is creating a new personeName instance and binding person as its this variable. It is important to understand that it copies the personeName function.
• After creating a copy of the personeName function it is able to call logPerson(), although it wasn’t on the person object initially. It will now recognize its properties (Karan and singh) and its methods.

And the amazing thing is, after we bind() a value we can use the function just like it was any other normal function. We could even update the function to accept parameters, and pass them like so:

var person = {
firstname:’Karan’
lastname: 'singh’
getFullName: function() {
var fullname = this.firstname + ' ' + this.lastname;
return fullname;
}
};
var personeName = function(snack, hobby) {
console.log(this.getFullName() + ‘Please come!’);
console.log(this.getFullName() + ' loves ' + snack + ' and ' + hobby);
};
var logPerson = personeName.bind(person); // creates new object and binds pokemon. 'this' of person === person now
logPerson('sushi', 'algorithms'); // Karan singh loves coding and algorithms

call() and apply():

The call() method calls a function with a given this value and arguments provided individually.
So that using this you can call any function, and you can explicitly mention what this should reference within the calling function. Almost similar to the bind() method! This can definitely save us from writing hacky code.
The main differences between bind() and call() are that the call() method:

• Accepts additional parameters as well
• Executes the function promptly.
• The call() method does not create a copy of the function from which we are calling it.

call() and apply() achieve the almost same purpose. The single difference between how they work is that we need to pass all individual parameters for calling call(), whereas apply() expects an array of all of our parameters. Example:

var person = {
firstname:’Karan’
lastname: 'singh’
getFullName: function() {
var fullname = this.firstname + ' ' + this.lastname;
return fullname;
}
};
var personeName = function(snack, hobby) {
console.log(this.getFullName() + ' loves ' + snack + ' and ' + hobby);
};
personeName.call(person,dance, 'algorithms'); // Karan singh loves dance and algorithms
personeName.apply(person,[dance, 'algorithms']); // Karan singh loves dance and algorithms

These built in methods are very useful. Even if you do not end up using them in your day to day programming, you will still run into it often when reading other peoples code.