How AND When to use bind, call, and apply in Javascript

Understanding This.

In order for you to fully understand bind, call, and apply you have to understand the Javascript concept of this .

Typically in programming languages, you have a this keyword (self in Python). The this keyword lets you refer to an object from within that object. So for example. If you want to define a property engine on an instance of an object car rather than setting car.engine = “V6" you would set this.engine = “V6”. Why? Because we only want to set the individual instance of that object’s engine, not all car’s engines.

This in context

One thing that is confusing about Javascript is that this‘s value will change depending on the context that this is called in. By default it refers to the global scope, but when called within a function, it refers to that function. Let’s break that down with an example.

  1. Right click this window, and open up a javascript console.

  2. Type in this and hit enter .

 

You should see something like this.

“Window” ?!?! Wait what?

Mostly everything in Javascript is an object, so in our case this refers to the current window that is open.

Alright, now type in () => console.log(this) and hit enter .

 

You should now see something like this.

We’ve logged this within the context of an anonymous function, so when we log this , it’s showing that anonymous function.

This is a confusing concept in Javascript. So if you’re not sure of it at this point, pause this article and go check out this — MDN.

Call

call quite simply lets you substitute a this context when you invoke a function. Calling the .call() method on a function, will immediately invoke that function.

Example

let car = {
  hornMessage: "Beep! Beep!",
  soundHorn : function(){
                return this.honkMessage;
              }
};
let truckHorn = {
  hornMessage: "HOOONNNNKKKKK!"
};
car.soundHorn(); // "Beep! Beep!"
car.soundHorn.call(truckHorn); // "HOOONNNNKKKKK!"

When to use call

When you are dealing with an array-like object and want to call an array method. A common use case is the args object being passed to functions.

Rick Viscomi shows a good practical code example of this in Quora — What are the everyday uses of call and apply in Javascript?.

Apply

apply is very similar to call. It immediately calls a function and lets you specify a this value. The only difference between apply and call is that rather than specifying each argument for the function like someFunction.call(thisValue,arg1,arg2) you can pass the arguments as an array. So apply would look like this someFunction.apply(thisValue,[argArray])

When to use apply

A common use case for apply was to call functions that couldn’t be passed an array of arguments. For example, if you had an array of numbers: let nums = [1,2,3] and you wanted to find the smallest number. You couldn’t just call Math.min(nums) you would instead have to call Math.min.apply(null,nums) to get a minimum.

With the introduction of the spread operator ... , this use case is not the preferred way of doing things, but it’s good to be aware of if you’re looking at legacy code. You would now want to just call Math.min(...nums) .

Further Reading:

Bind

bind is slightly different from call and apply , rather than immediately invoking the function it actually creates and returns a new function. The new function has the specified this value bound to it.

Example

let car = {
  hornMessage: "Beep! Beep!",
  honk: function(){
    return this.hornMessage;
  }
};
let truck = {
  hornMessage: "HOOONNNNKKK!!"
};
// We can easily call the car's honk method.
car.honk(); // "Beep! Beep!"
// We can call honk with the truck context using .call
car.honk.call(truck); // "HOOONNNNKKK!!"
// But what if we want to create a truckHonk method to store that function and call it at a later time?
let truckHonk = car.honk.bind(truck);
truckHonk() // "HOOONNNNKKK!!"

When to use

  1. Async stuff

A very common front-end use case for bind is for anything that will happen asynchronously. For example in a callback that needs access to the original this context. This is especially handy in component based frameworks like React.

2. Partial Applications

A great use case for bind is Partial Applications of functions. (i.e. giving a function only some of it’s arguments).

Further Reading