When to use call, apply, bind in Javascript?
Tags: javascript, es6
Published: 2020-12-31 13:04:08

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.

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

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

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

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

```javascript
'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).

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

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

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