Simply explained: call(), apply() and bind()
Tags: javascript
Published: 2020-06-06 12:55:21

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!

<hr/>

# RPG game

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

```javascript
// 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.

<hr/>

## 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:

```javascript
// Basic actions as methods

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

<hr/>

## RPG characters

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

```javascript
// 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!

<hr/>

## 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:

```javascript
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:

```javascript
// 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 }
```

<hr />

## 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`:

```javascript
// 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.