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

If you’ve spent some time learning JavaScript, you’ve probably come across the keyword `this` and had a thought about what it actually refers to.

Sometimes it points to an object. Sometimes it seems to behave differently depending on how a function is called. This flexibility can feel confusing at first, but the idea behind it is actually simple.

A good way to understand `this` is to think about who is responsible for running the function.

In many situations, `this` simply refers to the object that calls the function. Once that idea clicks, the rest of the concepts—like `call()`, `apply()`, and `bind()`, start to make much more sense.

Let’s explore how it works.

## What "this" Means in JavaScript

In JavaScript, The keyword `this` refers to the current object that is executing the function.

> Think of it like : “Who is calling this function right now?”

A simpler way to remember this is:

> `this` usually refers to **the object that called the function**.

Here’s a simple example.

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

person.greet();
```

Output:

```plaintext
Hello, my name is Alice
```

When `greet()` runs, it is called by the `person` object:

*   The object `person` called the function
    
*   So `this` refers to person
    

## "this" Inside Normal Functions

If a function is being called on it's own, instead of being called through an object, it behaves differently.

In a regular standalone function, `this` usually refers to the **global object** (or `undefined` in strict mode).

Example:

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

show();
```

Here, `this` does not refer to any specific object because the function was called directly.

This is why `this` is more useful when working with objects.

## "this" Inside Objects

Inside objects, `this` refers to the object that owns the method.

Example:

```javascript
let car = {
  brand: "Toyota",
  showBrand: function() {
    console.log(this.brand);
  }
};

car.showBrand();
```

Output:

```plaintext
Toyota
```

Here, the `showBrand` method is called by the `car` object. That means `this` points to car, allowing the method to access `car.brand`.

> this.brand ---> car.brand

* * *

## What `call()` Does

JavaScript includes methods that allow you to control what `this` refers to.

One of these is `call()`.

The `call()` method allows you to borrow a function from one object and use it with another object.

Example:

```javascript
let person1 = {
  name: "Rahul"
};

let person2 = {
  name: "Anita"
};

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

greet.call(person1);
greet.call(person2);
```

Output:

```plaintext
Hello Rahul
Hello Anita
```

Here, the same function is used with different objects. `call()` temporarily assigns the object as the context for `this`.

`call()` lets us manually choose what `this` should refer to.

## What `apply()` Does

The `apply()` method works almost the same way as `call()`, but there is one small difference in how arguments are passed.

With `apply()`, arguments are provided inside an **array**.

Example:

```javascript
function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

let person = {
  name: "Rahul"
};

introduce.apply(person, ["Delhi", "India"]);
```

Output:

```plaintext
Rahul lives in Delhi, India
```

So while both methods allow you to set `this`, the only real difference is how the arguments are passed.

```plaintext
call() → arguments passed separately
apply() → arguments passed as an array
```

## What `bind()` Does

Unlike `call()` and `apply()`, the `bind()` method does not immediately run the function.

Instead, it creates a new function where `this` is permanently set to a specific object.

Example:

```javascript
let person = {
  name: "Rahul"
};

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

let greetUser = greet.bind(person);

greetUser();
```

Output:

```plaintext
Hello Rahul
```

In this case, `bind()` produces a new function that always treats `person` as `this`, no matter where the function is used later.

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

These three methods are closely related but serve slightly different purposes.

| Method | Behavior | Arguments |
| --- | --- | --- |
| call() | Runs the function immediately | Arguments passed individually |
| apply() | Runs the function immediately | Arguments passed as an array |
| bind() | Returns a new function | Arguments provided later |

Example comparison:

```javascript
func.call(obj, arg1, arg2);

func.apply(obj, [arg1, arg2]);

let newFunc = func.bind(obj);
```