Bind(), Call() and Apply()

I bet you are very confused right now on how do these three functions are used since you are reading this post right now, I was too… But I figured out a very simple way to explain them so I hope this story helps you as a cheatsheet whenever you want to remember how are this functions used.

But first you must have a clear definition of the “this” keyword and have already studied some Object-Oriented Programming to have a better understanding on how this functions work, so I’ll share you this other Medium post that can help you understand what Object-Oriented Programming is and this :

A deep dive into this in JavaScript: why it’s critical to writing good code.

As a memory refreshner I will just explain what a Method is since sometimes can be a bit hard to understand:

Once you have created objects, you want them to be able to do something. This is where methods come in. A method in object-oriented programming is a procedure associated with a class. A method defines the behavior of the objects that are created from the class. Another way to say this is that a method is an action that an object is able to perform.

— Paul Zandbergen, Object-Oriented Programming: Objects, Classes & Methods

For example:

Let’s say we have this Object named “person”, this personhas some properties like first name, last name and full name.

The property getFullName is what we call a Method, since it’s a function that belongs to an object’s property and can perform actions with it’s other properties.

So now that we are clear on what a method is, let’s begin with what bind(), call()and apply()can do.

Bind(this)…

• Creates a copy of the method you want to use but does not excecute it.
• You explicitly bind this for assigning the object the function is being copied from.
• It’s also used for FUNCTION CURRYING when besides setting this, you permantly set the parameters’ values of the copied function.

Let’s say we created a functionoutside our object in which we want to use the getFullNamemethod for it to log a greeting with our person’s full name:

First we know that the this keyword won’t work as we want because we are calling it outside our object so this will point to the window object.

That’s when we use bind() to do what we want.

Now let’s talk about Function Currying…

Function currying is reducing functions that take several arguments to several functions of one argument.

So let’s say we have a function called “multiply”:

Then I want to create a new function that multiplies any given number by two:

I use bind() to create a copy of the multiplyfunction and since I don’t care what the this keyword points to, I just let it as this . But I am giving bind()a parameter besides thiswith the value of two, that will set a permanent value to the first parameter of our copy of multiply function, in this case:a to the value of 2 so I can multiply any number that I give to my multiplyByTwo() function by two.

But if I put a second parameter to bind() then our second parameter of the copy of the multiply function; in this case b , will be permantly set as well.

But we don’t want to do that do we?

Call(this, params)…

• Excecutes the function by setting the this keyword.
• thisshould be the object you want to excecute the action to.
• We use it for FUNCTION BORROWING.

Let’s say we have another object:

Now we want to use the getFullNamemethod from the previously created object personsince our object doesn’t have that method.

In order to be able to use the person.getFullNamemethod with the values in person2object we do the following:

So we are invoquing the getFullNamemethod from personand setting the thiskeyword used in the method to the person2 object, in other words we are “borrowing” the function.

So at the end if we console.log the result will be “John Doe”.

Apply(this, [params…])…

• Works exactly like call.
• The parameters you want to pass should be inside an array.

But that turns out to be a very important difference. Unlike a series of arguments, an array is very easy to manipulate in JavaScript. And that opens up much larger possibilities for working with functions.

So that was it… Hopefully after reading this you understand much better how this methods are used and if you enjoyed the reading I would be very thankfull if you leave some “claps”(you can leave up to 50 claps at once if you want 😄).

Cheers!