# The Magic of this, call(), apply(), and bind() in JavaScript

## What `this` means in JavaScript ?

One way to understand `this` is : `this` means "`who is calling the function`" .It refers to the object that is executing the function.Let us understand it with an real world example .

Imagine a remote control in the home. When we press a button on it, "this" points to the TV (the main device in the room) but if we press the same button while holding a different gadget like a fan remote "this" now points to the fan instead. The button's job is the same (e.g., turn on or turn off ) but "this" adapts to whoever is receiving the command right then.

### `" this "` inside a normal function

When a function is called normally, `this` usually refers to the **global object**.

```javascript
function hello() {
  console.log(this);
}

hello();
/*
Output: Window object (because the window called it)
*/

//The function hello was called directly, so this refers to the global object.
```

**Note:** Normal function call → this = global object

### `this` inside Objects

When a function is inside an object, `this` refers to that object.

```javascript
//craeting an object having key value pairs
const person = {
  name: "Ram",
  age: 25,

  showDetails: function () {
    console.log(this.name);
  }
};

person.showDetails(); //Ram
/*
person is calling the function that's why this = person

this → who called the function (in our example person called it)
*/
```

## Borrowing Methods: `call()`, `apply()`, and `bind()`

Sometimes, a user wants to force `this` to point to a specific object when required, even if that object didn't **call** the function. We call this `Explicit Binding.`

### What is `call()`?

`call()` lets a user change who calls the function (sets `this`), runs it right away, and takes arguments one by one after the object.

```javascript
//Example 1 call without arguments
function greet() {
  console.log("Hello " + this.name);
}

const user1 = { name: "Abhishek" };
const user2 = { name: "Rahul" };

greet.call(user1);//Hello Abhishek
greet.call(user2);//Hello Rahul

/* *************************************************************/

//exampe 2 call with arguments
function introduce(state,capital) {
  console.log(`${this.name} lives in ${state} whose capital is, ${capital}`);
}

const person1 = { name: "Piyush Garg" };

introduce.call(person1, "Himachal Pradesh", "Chandigrah"); 
// Piyush Garg lives in Himachal Pradesh whose capital is, Chandigrah

/*
run introduce() and treat person1 as this
so this = person1
*/
```

### What is `apply()`?

apply() works the same as call() but one difference is how arguments are passed when calling and arguments are passed as an array.

```javascript
function greet(state, capital) {
  console.log(this.name + " is from " + state + ",whose capital is " + capital);
}

const person = { name: "Piyush" };

greet.apply(person, ["Himachal Pradesh", "Chandigrah"]);
//Piyush is from Himachal Pradesh,whose capital is Chandigrah
//Here argumnets is an array
```

### What is `bind()`?

Unlike the other two methods, `bind()` does not call the function immediately. It creates a new function with fixed `this` locked to the object a user provides. A user can then run it whenever he wants later as per the requirement.

```javascript
function greet() {
  console.log("Hello " + this.name);
}

const person = { name: "Piyush Garg" };

const newFunction = greet.bind(person);
//bind is returning a new function 

newFunction();
/*here the new function is exceuted
Output:Hello Piyush Garg
*/
```

![](https://cdn.hashnode.com/uploads/covers/69821ff00f89ae94fd533b40/3d7cd05a-4ac6-419b-bf96-6c0966fda5e7.png align="center")

* * *

* * *

## Comparison table between `call`, `apply`, and `bind` :

| Feature | call() | apply() | bind() |
| --- | --- | --- | --- |
| Runs immediately | Yes | Yes | No |
| Returns a new function | No | No | Yes |
| Arguments format | normal arguments | array | normal arguments |
| Purpose | change `this` | change `this` | permanently bind `this` |

![](https://cdn.hashnode.com/uploads/covers/69821ff00f89ae94fd533b40/08f4ef1d-c1c4-4a0c-8c29-a363f869d720.png align="center")