Simply explained: call(), apply() and bind()

As an aspiring web developer you've must have come across either or all of these three methods: call(), apply(), and bind(). Always wanted to know how and when to use them? In this article I will show you how in a simply way!

---

RPG game

Let's say you are creating a RPG game and you have several functions that you want to use for every character:

// Basic actions as functions

function heal(amount) {
   // heal this character
}

function setLevel(level) {
   // sets level of this character
}

function mute() {
   // mute this character
}

Notice how I am using the this keyword in every function? This is because we want to apply the function for a specific character in the game.

---

RPG actions

Let's place our functions inside an object for easier use (another name for functions inside objects is methods) and return some logic:

// Basic actions as methods

const actions = {
   heal(amount) {
      return this.health += amount;
   },
   setLevel(level) {
      return this.level = level;
   },
   mute() {
      return this.sound = false;
   }
}

---

RPG characters

For our character let's create an object constructor that can produce characters:

// Object builder for characters

function Character (name, type, health) {
   this.name = name;
   this.type = type;
   this.health = health;
}

const Jessica = new Character("Jessica", "wizard", 10);
const Patrick = new Character("Patrick", "warrior", 10);

We've just created Jessica the wizard and Patrick the warrior!

---

Jessica is hurt

What if Jessica is wandering around and suddenly gets in a fight with one of the monsters in our RPG world? She will use a potion to heal herself with 20 points. So we have to use our heal() function with an amount of 20.

We've placed the heal function inside our object actions but now we want to call this function onto Jessica:

actions.heal.call(Jessica, 20);
console.log(Jessica) // She now has 30 HP instead of 10!

We have applied our function and Jessica, and she is back to live. That is basically all that call is: using a function directly on a receiver, in this case Jessica.

apply does the same thing, except you give parameters as an array:

// Add new method to our actions
actions.move = function(x, y, z) {
   return this.position = { x, y, z};
}

// Patrick's new location
const location = [2, 4, 6];

// Call new method on Patrick
actions.move.apply(Patrick, [...location]);

// Check where Patrick is now
console.log(Patrick.position); // { x: 2, y: 4, z: 6 }

---

Moving Patrick back to base

Let's say we want to move Patrick back into base camp with one command. Instead of writing our call or apply every time we can store this command with bind:

// Command to move Patrick back to base
const patrickToBase = actions.move.bind(Patrick, 0, 0, 0)

// Move Patrick back
patrickToBase();
console.log(Patrick.position); // { x: 0, y: 0, z: 0 }

So as we have seen call(), apply() and bind() are useful for borrowing methods (functions inside objects) to whatever object or primitive we want based on the value of the this keyword.

Awesome! Hope you have a better understanding of these 3 useful methods.