Call, Apply & Bind Methods In Javascript
Tags: javascript, codenewbie, programming, 100daysofcode
Published: 2021-01-15 20:55:35

In Javascript working with `"this"` is very tricky if you don't understand the concept in-depth. It’s good to know the theory before putting things into practice.

`Call()`, `Apply()`, and `Bind()` methods can come in handy when setting the `“this”` value.

Before we dive deep into these methods, let's first understand the `this` keyword.

## `this` in Javascript

#### Points To Remember !!

- `this` always refers to an object.
- `this` refers to an object which calls the function it contains.
- Each & every function in javascript has access to the `this` keyword. 
- In the global context `this` refers to either window object or is undefined if the `strict mode` is used.

### `this` inside a method

When `this` is used inside a method, it refers to the owner object.

Functions defined inside an object are called **methods**. 


Now look at the following example:


```javascript
let language = {
    name: 'JS',
    desc: 'language of web',
    displayDetails: function (){
        console.log(this.name + ' ' + this.desc);
    }
}

language.displayDetails();
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610654797386/O8FdWtWyC.png)

In the above code snippet, `this` refers to the `language` object. 

### `this` inside a function

`this` inside a function is a bit complicated. The first thing to understand is that, like all objects have properties, likewise functions have properties too. Whenever that function is executed, it gets `this` property, which is a variable with the value of the object that invokes it.

If the function is not invoked by an object then `this` inside the function belongs to the global object, which is called **window**. In this case, `this` will refer to the values defined in the global scope. 

Let’s see an example for better understanding:


```javascript
var name = 'C++'
var desc = 'Programming language'

function displayDetails(){
    console.log(this.name + ' ' + this.desc); //Output: C++ Programming language
}

displayDetails();
``` 

### `this` used Alone

When used alone not inside any function or object, this refers to the global object.

The `this` here refers to the global name property.


```javascript
var name = 'Javascript'
var desc = 'language of web'

console.log(this.name); //Output: Javascript

``` 

Now, enough of `this`. Let's move to the `call()`, `apply()`, & `bind()`.

## Call() Method

It allows us to borrow functions and set the `this` value on function invocation.

**Function Borrowing:** We can borrow function from other objects and use it with data of some other objects. 


```javascript
var language = {
    name: 'JS',
    desc: 'Language of web',
    displayDetails: function (){
        console.log(this.name + ' ' + this.desc);
    }
}

var language2 = {
    name: 'C++',
    desc: 'Programming language'
}

language.displayDetails.call(language2);
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610740051254/Q1hWntfoV.png)

Each & every method in Javascript has access to this special function which is `call()`. In this `call()` the first argument will be the reference of `this` (what we want `this` to be pointing to).

In the general case, we define our functions which are more reusable.

Look at the other example:


```javascript
function displayDetails(){
    console.log(this.name + ' ' + this.desc);
}

var language = {
    name: 'JS',
    desc: 'Language of web'
}

displayDetails.call(language);
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610738676349/hfI80XhhQt.png)

What if we want to add more parameters to the function???

The first argument inside `call()` always points to the reference of `this` and the later arguments can be the arguments to the function.


```javascript
function displayDetails(stars, points){
    console.log(this.name + ' ' + this.desc + ' ' + stars + ' ' + points);
}

var language = {
    name: 'JS',
    desc: 'Language of web'
}

displayDetails.call(language, "5", "10");
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610740837715/z_gaPXzvu.png)


## Apply() Method

This method is similar to the `call()` method above. The only difference between `call()` & `apply()` methods is how we pass arguments to the function.

In the `call()` method we pass arguments using comma-separated.

In the `apply()` method we pass an array of arguments.

Let's look at the example for a better understanding.


```javascript
function displayDetails(stars, points){
    console.log(this.name + ' ' + this.desc + ' ' + stars + ' ' + points);
}

var language = {
    name: 'JS',
    desc: 'Language of web'
}

displayDetails.apply(language, ["5", "10"]);
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610741383580/UbCyYse_1.png)

## Bind() Method

It creates a copy of the function and it will bind it to the object and then return a function.

It doesn't directly call the function rather it will return us a method that can be called later.

Confuse???  Let's understand using the next example.

```javascript
function displayDetails(stars, points){
    console.log(this.name + ' ' + this.desc + ' ' + stars + ' ' + points);
}

var language = {
    name: 'JS',
    desc: 'Language of web'
}

let anotherDisplay = displayDetails.bind(language, "5", "10");
console.log(anotherDisplay);
anotherDisplay();
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610741722936/AyIq2vI7l.png)

Only difference between `call()` & `bind()` is:

**bind()** method gives you the copy of function which can be invoked later rather than directly invoking it just like in the **call()** method.

## Wrap Up!!

Thanks for reading!! I hope now you have a clear idea about these methods. Please share it with your network if you find it useful. Don’t forget to leave your comments below.

[![Buy-me-a-coffee](https://cdn.buymeacoffee.com/buttons/v2/default-blue.png)](https://www.buymeacoffee.com/anuradha2612)