Call, Apply, Bind — Javascript Methods
By: Andrew Richards
Tags: Learn Javascript, JavaScript, Javascript Development, Javascript Tips, Software Development

Call, Apply, and Bind are Javascript functions that you will begin to see as you learn more and more about Javascript.

They are key to being able to manipulate objects in creative and efficient ways. For that reason, they are a must when understanding Javascript.

Get it? Call.

The good news is they are not that hard to understand. It just takes a 5 minute rundown on the 3.

Call

The call method in Javascript is a way to use a method on an object. Rather than giving that object it’s own method, we can use the this keyword to reference any of the keys in that object.

For example:

let obj = {age: 7}

Here we have a normal object with one key value pair. Let’s write a function that will increase the age by any value we want.

let increaseAge = function(a){ return this.age = this.age + a }

The this keyword in this instance is going to be our object. So you can imagine this object having 100 properties, we can reference any of them. Here we just want to reference the age property.

How do we do this?

This is where the call method comes in. We can call call on our increaseAge function. The call method will take 2 methods. The first will be the object we want to call the function on. The second will be any arguments the new function takes.

increaseAge.call(obj, 5) //obj.age will now have a value of 12

So call is used to call functions on objects.

What about Multiple arguments?

let increaseAge = function(a, b, c){ return this.age = this.age + a + b + c }

All we do is follow the object with the 3 arguments

increaseAge.call(obj, 5, 0, 1) //obj.age will now have a value of 13

Apply

There is a very small difference between apply and call.

Let’s say instead of writing out each and every argument, we wanted to pass in an array of arguments.

This is where we use apply.

First let’s set up our array.

let arr = [5, 5, 5]

Now let’s use apply instead of call, and pass our array instead.

increaseAge.apply(obj, arr) //obj.age will now have a value of 22

That is the only difference between call and apply.

Bind

Bind is a bit different than both apply and call. But bears the most similarity to call.

What bind does is it ‘binds’ a function to an object.

Using bind will return a function. We can then call this function with the correct arguments to get a result.

Let me clarify this with an example.

let obj = {age: 5} let addToAge = function(a, b, c){

return this.age = this.age + a + b + c

}

As we remember, if we call call here we will return the result. If we call bind, we return a function that we can call in the future.

To demonstrate this we can console.log our result

console.log(addToAge.bind(obj))

//this will log a function

Notice we only passed in the object. This is because we want to be able to call our function with new arguments each time.

So let’s store this new function in a variable so that we can use it later.

let bound = addToAge.bind(obj)

Now we remember our function takes 3 arguments. We can now use our new variable bound, (a function), and call it with our 3 arguments to get our result.

bound(1,2,3)

// this will add the age (5) with the 3 arguments (1, 2, 3) to get 11

Notice that we did not pass an array in here.

This is what I meant when I said bind can be more compared to call than apply.

Recap

Call: Allows you to create functions that work with properties of an object. We use the this keyword to represent the object that we will pass into call. This allows us to create functions that can be versatile and work with many different objects with the same properties.

Apply: Apply does the same as call. But instead of passing in arguments one by one, we can pass in an array of items.

Bind: Bind will ‘bind’ a function to an object and return a new function that we can use at a later time. This allows us to call this new function whenever we want, knowing that the properties of the object are stored and bound to our new function. This allows us to call this function with new arguments any time we want to do something to that object such as increase the age property as we did in our example.

Conclusion

As you become more and more advanced in Javascript you will start to noticed functions being used to interact with objects in these ways.

For example, when memoizing Fibinacci, you will see the call or apply function being used as we call a passed in function when needed.

Thanks for reading. Please follow me on Twitter @thedrewprint and find me on LinkedIn — Andrew Richards