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

## Understanding `this` in Simple Terms

In JavaScript, `this` refers to the object that is calling the function.

A simple way to think about it is:

> `this` answers the question: Who is calling this function?

The value of `this` is not fixed. It depends on how the function is called, not where it is written.

* * *

## `this` Inside a Normal Function

When `this` is used inside a regular function that is not part of an object, its value depends on the environment.

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

show();
```

In a browser, this will usually refer to the global object. In strict mode, it will be `undefined`.

The key idea is that no object is clearly calling the function, so `this` does not refer to a custom object.

* * *

## `this` Inside an Object

When a function is defined as a method inside an object, `this` refers to the object that calls the method.

```javascript
const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet();
```

Here, `person` is calling `greet()`. Therefore, `this` refers to `person`.

If the calling object changes, `this` changes as well.

* * *

## Borrowing Methods with `call()`

The `call()` method allows one object to borrow a function from another object. It immediately invokes the function and allows you to specify what `this` should refer to.

### Creating an Object with a Method

```javascript
const user1 = {
  name: "John",
  introduce: function(city) {
    console.log("Hi, I am " + this.name + " from " + city);
  }
};
```

Calling it normally:

```javascript
user1.introduce("New York");
```

Now create another object without the method:

```javascript
const user2 = {
  name: "Emma"
};
```

We can borrow the method using `call()`:

```javascript
user1.introduce.call(user2, "London");
```

Here:

*   `call()` sets `this` to `user2`
    
*   The argument `"London"` is passed normally
    

So `this.name` becomes `"Emma"`.

* * *

## Using `apply()`

The `apply()` method works almost exactly like `call()`. The difference is how arguments are passed.

*   `call()` takes arguments separately.
    
*   `apply()` takes arguments as an array.
    

Using the same example:

```javascript
user1.introduce.apply(user2, ["Paris"]);
```

The function runs immediately, just like `call()`, but the arguments are inside an array.

* * *

## Using `bind()`

The `bind()` method is different. It does not immediately execute the function. Instead, it returns a new function with `this` permanently set to a specific object.

```javascript
const boundFunction = user1.introduce.bind(user2, "Berlin");
```

At this point, nothing runs yet.

When we call the new function:

```javascript
boundFunction();
```

It prints:

```plaintext
Hi, I am Emma from Berlin
```

Important idea:

*   `bind()` creates a new function.
    
*   It does not execute immediately.
    
*   It locks `this` to the provided object.
    

* * *

## Difference Between `call()`, `apply()`, and `bind()`

| Method | Executes Immediately | How Arguments Are Passed | Returns New Function |
| --- | --- | --- | --- |
| `call()` | Yes | Separately | No |
| `apply()` | Yes | As an array | No |
| `bind()` | No | Separately | Yes |

### Summary in Simple Words

*   `call()` runs the function immediately and sets `this`.
    
*   `apply()` does the same but takes arguments in an array.
    
*   `bind()` prepares a new function with a fixed `this` for later use.
    

* * *

## Seeing the Concept Clearly

The power of these methods becomes clear when you understand that `this` depends on who calls the function.

Normally:

```javascript
user1.introduce("Rome");
```

Here, `this` is `user1`.

With `call()` or `apply()`:

```javascript
user1.introduce.call(user2, "Madrid");
```

Now `this` becomes `user2`.

With `bind()`:

```javascript
const newIntro = user1.introduce.bind(user2, "Tokyo");
newIntro();
```

Even though the function belongs to `user1`, `this` permanently refers to `user2`.

* * *

## Final Understanding

The keyword `this` represents the object that is calling a function. Its value changes depending on how the function is invoked.

The methods `call()`, `apply()`, and `bind()` give you full control over what `this` should refer to.

*   Use `call()` when you want to invoke a function immediately with specific arguments.
    
*   Use `apply()` when your arguments are already in an array.
    
*   Use `bind()` when you want to create a new function with a fixed `this` for later use.
    

Understanding these concepts is essential for mastering object behavior, method borrowing, and advanced function handling in JavaScript.