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

Hey Everyone,

In this blog, we will learn about call(), apply(), and bind() in JavaScript.

One concept that confuses many JavaScript beginners is the keyword `this`.

Understanding how `this` works — and how `call()`, `apply()`, and `bind()` control it — is an important step toward writing better JavaScript.

* * *

### What Does `this` Mean?

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

Think of it as answering the question:

👉 **“Who is calling this function?”**

Example:

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

person.greet();
```

Output:

```plaintext
Hello, my name is Rahul
```

Here:

*   The function `greet()` is called by `person`
    
*   So `this` **refers to** `person`
    

* * *

### `this` Inside Normal Functions

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

Example:

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

show();
```

In a browser environment, `this` typically refers to the **window object**.

The key idea is:

👉 `this` depends on **how the function is called**, not where it is written.

* * *

### `this` Inside Objects

When a function is called as a **method of an object**, `this` refers to that object.

Example:

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

car.showBrand();
```

Output:

```plaintext
Toyota
```

Here `this.brand` refers to `car.brand`.

* * *

### What Does `call()` Do?

The `call()` method allows us to **manually set the value of** `this`.

Example:

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

const person2 = {
  name: "Anita"
};

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

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

Output:

```plaintext
Hello Rahul
Hello Anita
```

`call()` lets us choose **which object should be** `this`.

* * *

### What Does `apply()` Do?

### `apply()` works almost the same as `call()`.

The difference is **how arguments are passed**.

Example:

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

const person = { name: "Rahul" };

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

Output:

```plaintext
Rahul from Delhi, India
```

Here arguments are passed as an **array**.

* * *

### What Does `bind()` Do?

`bind()` also sets the value of `this`, but it **returns a new function instead of calling it immediately**.

Example:

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

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

const greetRahul = greet.bind(person);

greetRahul();
```

Output:

```plaintext
Hello Rahul
```

The function is stored and can be called later.

* * *

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

| Method | When it runs | How arguments are passed |
| --- | --- | --- |
| `call()` | Runs immediately | Arguments passed individually |
| `apply()` | Runs immediately | Arguments passed as an array |
| `bind()` | Returns a new function | Arguments can be passed later |

Example comparison:

```javascript
func.call(obj, a, b);
func.apply(obj, [a, b]);
const newFunc = func.bind(obj);
```

* * *

### Practice Assignment

Try the following exercise.

### 1\. Create an Object

```javascript
const student = {
  name: "Aman",
  showName() {
    console.log(this.name);
  }
};
```

* * *

### 2\. Borrow the Method Using `call()`

```javascript
const student2 = {
  name: "Riya"
};

student.showName.call(student2);
```

* * *

### 3\. Use `apply()` with Arguments

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

introduce.apply(student2, ["Mumbai", "India"]);
```

* * *

### 4\. Use `bind()`

```javascript
const intro = introduce.bind(student2, "Delhi", "India");

intro();
```

* * *

And now, you know what is the difference among **call(), apply(), and bind()** in **JavaScript**

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!