When to use call, apply, bind in Javascript?

In this article, we are going to look into the application of call,apply and bind in javascript with examples.

Firstly, to understand call, apply and bind we need to understand about this keyword and its usage in javascript. So let's look into it in detail.

What is this in javascript ?

The Javascript this basically refers to the object it belongs to.

Now let's look at different cases to understand more about it.

1. this in global scope

If we use this keyword globally then it will refer to the the Window object. Window object is nothing but a open window in the browser.

Let's look into few examples to understand about it.

var x = this;
console.log(x) // Window Object

this.chair="red"
console.log(window.chair) //"red"

In the above examples we can see that the this used in global scope refers to the Window Object.

2. this inside a Object method

In an object method, this will refer to the "owner" of the method.

Now let's look into an example to understand about it.

let myRoom={
chair:"red chair",
cleanChair(){
chair="blue chair"
console.log(this.chair)
}
}
myRoom.cleanChair();//"red chair"

In the above example we can clearly see how this inside a method will always refer to the owner of the method.
Though cleanChair() method has a chair of its own, it will not refer to it but will refer to the owner of the method which is myRoom and that's why returns "red chair".

3. this inside a function(Default)

In a JavaScript function, the owner of the function will be the default binding for this. So, when a function is used in default mode, this refers to the Global object [object Window]

Let's look into an example to understand about it.

this.chair="red"
 let room = function(){
 console.log(this.chair) //red
 }
 room();

In the above example we can see that this when used with a function in default mode refers to a Global Object.

4. this inside a function(Strict)

JavaScript strict mode does not allow default binding of this. So, when used in a function, in strict mode, this is undefined.

Let us look into an example to understand about it.

'use strict'
this.chair="red"
let room = function(){
console.log(this.chair) 
}
room();//cannot read property chair of undefined

In the above example we can see that this inside a function in strict mode gives an error of undefined because the function doesn't know which one to refer and then to immediately invoke the value of this.

In situations like this we use call, apply and bind to give proper context of this

You can use call() /apply() to invoke the function immediately. bind() returns a bound function which when executed later, will have the correct context ("this") for calling the original function. So bind() can be used when the function needs to be called later in certain events when it's useful.

Let's look at how each of them solves the issue with an example.

call()

The call() method is a predefined JavaScript method which is used to invoke (call) a method with an owner object as an argument (parameter).

 'use strict'
this.chair="red"
let room = function(a,b){
console.log(`${this.chair} ${a} ${b}`) 
}
room.call(this,'blue','green')//"red blue green"

In the above example we can see that call() method immediately invokes this and allows you to pass in arguments one by one using commas therby solving the issue we saw earlier.

apply

The apply() method is similar to the call() method. The only difference is that the apply() method takes in arguments as an array.

Let's look into an example to understand more about it.

 'use strict'
this.chair="red"
let room = function(a,b){
console.log(`${this.chair} ${a} ${b}`) 
}
room.apply(this,['blue','green'])//"red blue green"

In the above example we can see that apply() method immediately invokes this and allows you to pass in arguments as an array one by one using commas therby solving the issue we saw earlier of using this inside a function.

bind

The Bind method returns a new function, allowing you to pass in this and any number of arguments. Use it when you want that function to later be called with a certain context like events.

Let us look in an example to understand more about it in detail.

this.chair="red"
let room = function(a,b){
console.log(`${this.chair} ${a} ${b}`) 
}

const bindRoom=room.bind(this)('blue','green') //"red blue green"

In the above code sample for bind() we are returning a bindRoom function with the context of this which will be invoked later.

If you liked this article, give it a ❤ 🦄 and Save it for later.