JavaScript apply, call & bind Simplified
Tags: javascript, scope, this, object
Published: 2020-10-04 22:25:15

---
title: JavaScript apply, call & bind Simplified
published: true
description: 
tags: javascript, scope, this, object
cover_image: https://images.unsplash.com/photo-1501783710424-d444e18d4030?ixlib=rb-1.2.1&auto=format&fit=crop&w=3300&q=80
---

One of the aspects of mastering scope and the value of `this` in JavaScript is to understand how `apply`, `call` and `bind` work.
This article aims at simplifying these methods. I'll try to keep the explanation as simple as possible here.

`this` in JS refers refers to the **current context** in which a function is being called. Although covering `this` in detail is a separate article in itself, the main point to remember is that to determine the `this` object, we need to see where the function is being invoked.

Amongst several possibilities of `this`, we discuss three of the ways JS allows us to set what `this` will be for a function.

---

To call a function in JS (and most other languages), we simply pass the parameters and invoke it. Example:
```js
function logMe(text) {
  console.log(text);
}

logMe('Canada')
// Output: 'Canada'

```

When `apply`, `call` and `bind` come in the picture, it allows us to also specify the `this` object for the function.
So, these methods allow us to invoke/call a JS function by specifying:
- the **scope** (`this` object) and 
- the **params**
for the function we want to call.

---

## ☎️ `apply` and `call`
Both of these methods are similar. 
When being used, they both take the **scope** or the **`this` object** as the first param followed by the parameters/arguments for the function.

The only difference is the way the arguments for the function are passed.

```js
function invokeMe(val1, val2) {
  // Note that the first `val` comes from the "this" object
  // that the function is referring to
  // and `val1` and `val2` are the function arguments. 
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

invokeMe.apply(thisObj, [arg1, arg2]); // Output: 'JavaScript Hello World'

invokeMe.call(thisObj, arg1, arg2); // Output: 'JavaScript Hello World'
```

`apply` takes the arguments to be passed in a single array.
`call` takes the arguments to be passed explicitly.

A useful mnemonic I found [here](https://stackoverflow.com/a/1986909) is 
__"a for array and c for comma."__

---

## 🤝 `bind`
The method `bind` also has the same calling syntax like `call` but, the significant difference is that
`call` calls the function immediately and,
`bind` only binds the function and creates a new function that can be called later.

```js
function invokeMe(val1, val2) {
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

// Binding the function ⬇
const bind1 = invokeMe.bind(thisObj, arg1, arg2); // No Output Yet
// Invoking the function ⬇
bind1(); // Output: 'JavaScript Hello World'
```

To better understand `bind`, focus on the fact that it is for binding a function with a `this` scope and not for immediate invocation. 
This means that the arguments that need to be passed are not **required** when binding the function. They can be passed when invoking the function (usual programming style).

```js
function invokeMe(val1, val2) {
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

// Binding the function ⬇
const bind2 = invokeMe.bind(thisObj); // No Output Yet
// Invoking the function ⬇
bind2(arg1, arg2); // Output: 'JavaScript Hello World'
```

That's it. That covers the key usage guidelines for `apply`, `call` and `bind`. The explanation helps us understand that in OOPS, these methods help us reuse a single function for different objects without having to rewrite it for a new scope object.