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

When working with **JavaScript**, you will often encounter the keyword `this`.

Many beginners find `this` confusing at first, but once you understand how it works, it becomes a powerful feature for writing flexible and reusable code.

In this article, we will understand:

*   What `this` means in JavaScript
    
*   `this` inside normal functions
    
*   `this` inside objects
    
*   What `call()`, `apply()`, and `bind()` do
    
*   Differences between them
    

* * *

# What `this` Means in JavaScript

In simple terms:

👉 `this` **refers to the object that is calling the function.**

You can think of it as answering the question:

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

* * *

# `this` Inside Normal Functions

When `this` is used in a normal function (in a browser environment), it usually refers to the **global object**.

Example:

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

show();
```

In browsers, this typically prints the **window object**.

* * *

# `this` Inside Objects

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

Example:

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

person.greet();
```

Output:

```id="6dbgs9"
Hello, my name is Rahul
```

Here:

*   `this` refers to the **person object**
    
*   `this.name` accesses the property of that object
    

* * *

# What `call()` Does

The `call()` method allows us to **call a function with a specific object as** `this`.

Example:

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

let person2 = {
  name: "Amit"
};

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

greet.call(person1, "Delhi");
greet.call(person2, "Mumbai");
```

Output:

```id="3okg1k"
Hello Rahul from Delhi
Hello Amit from Mumbai
```

Here `call()` sets **which object** `this` **refers to**.

* * *

# What `apply()` Does

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

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

*   `call()` → arguments passed individually
    
*   `apply()` → arguments passed as an array
    

Example:

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

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

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

Output:

```id="ra5b68"
Rahul from Delhi, India
```

* * *

# What `bind()` Does

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

Instead, it **returns a new function with** `this` **bound to the given object**.

Example:

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

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

let greetPerson = greet.bind(person);

greetPerson();
```

Output:

```id="vdphk0"
Hello Rahul
```

Here `bind()` creates a **new function with fixed** `this`.

* * *

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

| Method | Executes Immediately | Arguments Format | Returns New Function |
| --- | --- | --- | --- |
| call() | Yes | Individual arguments | No |
| apply() | Yes | Array of arguments | No |
| bind() | No | Individual arguments | Yes |

* * *

# Assignment Practice

## Create an Object with a Method

```javascript
let student = {
  name: "Ravi",
  showName: function() {
    console.log(this.name);
  }
};

student.showName();
```

* * *

# Borrow Method Using `call()`

```javascript
let student1 = { name: "Ravi" };
let student2 = { name: "Priya" };

function showName() {
  console.log(this.name);
}

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

* * *

# Use `apply()` with Array Arguments

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

let person = { name: "Rahul" };

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

* * *

# Use `bind()` and Store Function

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

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

let greetAmit = greet.bind(person);

greetAmit();
```

* * *

# Visual Idea: Who Calls the Function?

Example:

```id="57bdcd"
Function → greet()

Caller → person object

this → person
```

So the **caller determines the value of** `this`.

* * *