Call, Apply,Bind, Function Borrowing and Currying

Javascript:

What is call, apply, bind ?

Above all methods refers to manipulating ‘this’ in their own ways.

bind():

Lets say we have an object Person,

const person = {
 firstname: “John”,
 lastname: “Doe”,
 getFullName: function() {
 var fullName = this.firstname+’ ‘+this.lastname;
 return fullName;
 }
}

And, lets say we have a following function, which logs the fullName,

const logName= function() {

console.log(“full name “, this.getFullName());

};

Other way of binding is as follows

const logName= function() {

console.log(“full name “, this.getFullName());

}.bind(person) ;

logName(); // John Doe

If we look at the above function it tries to access getFullName method of the person object but ‘this’ is unknown here , so how to acces ‘this’ in the above function .

const result= logName.bind(person); //bind returns a function it wont invoke rather only returns .

console.log(result) // John Doe

Here, we are binding ‘this’ of a function to ‘this’ of a person object . Now ‘this’ here in logName() refers to person object this .

A function is an object and every object have three methods by default available i.,e call, apply and bind.

call:

Unlike bind which create a copy of a function and returns , call is different which invokes the function immediately .

Lets take a example

logName.call(person); //John Doe

As we can see we are using a call method on logName function and passing a person object it takes that and immediately executes.

We can pass parameters too inside our call method lets see the example.

const logName= function(lang1, lang2) {

console.log(“full name “, this.getFullName());

console.log(lang1+” “+lang2);

};

One more ways to use call

const logName= function(lang1, lang2) {

console.log(“full name “, this.getFullName());

console.log(lang1+” “+lang2);

}. call(person, ‘en’, ‘es’);

//Lets invoke a call method

logName.call(person, ‘en’, ‘es’);

output:

John Doe

en es

apply:

Apply method is same as of call method only the difference is call method accepts an object followed by arguments/parameters where as apply method accepts an object followed by the array of arguments .

Ex:

logName.apply(person, [‘en’, ‘es’]);

output:

John Doe

en es

One more ways to use apply

const logName= function(lang1, lang2) {

console.log(“full name “, this.getFullName());

console.log(lang1+” “+lang2);

}. apply(person, [‘en’, ‘es’]);

And the above approach also works.

Function borrowing :

Lets look at the example below:

Object1

const person = {

firstname: “John”,

lastname: “Doe”,

getFullName: function() {

var fullName = this.firstname+’ ‘+this.lastname;

return fullName;

}

}

Object2:

const person1 = {

firstname: ‘Sharad’,

lastname: ‘Pawar’

}

Now lets say we want to access the method getFullName which is in object1 using our object2 ,so how can we do that lets take a example

person.getFullName.apply(person1);

Output:

Sharad Pawar

If we look at the above example we have borrowed a function from object1 and used passing our own parameters from object2.

Function Currying:

Ex:

function multiply(a,b){

return a+b;

}

var multiplyByFive=multiply.bind(this,2);

If we look at the above example we are creating a function which takes in two parameters and returns multiplication of two parameters .

When we call bind on multiply method we are passing a ‘this’ and 2 as a parameter. Don’t worry about ‘this’ here , but look at the second parameter which goes into multiply method and permanently sets the first parameter something like below.

function multiply(a,b){

var a=2;

return a+b;

}

Now lets invoke the multiplyByFive method

Console.log(multiplyByFive(5)); //10

As we can see we set the first parameter as 2 and passed second parameter as 5.

We are free to pass any number and multiply by 2.

var multiplyByFive=multiply.bind(this,2,3);

Now what if we passed both the parameters inside bind lets take a look

Console.log(multiplyByFive(5)); //6

As we can see that it gives first priority to the parameters inside the bind and 2*3 returns 6.

Note: Creating a copy of a function but with some preset parameters/values is function currying