JavaScript apply, call & bind Simplified

#javascript #scope #this #object

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:

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.

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 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.

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).

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.