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

JavaScript has a special keyword called `this` that often confuses beginners.  
But once you understand one simple idea, everything becomes much easier.

👉 Think of `this` **as “who is calling the function.”**

In this article, we will understand:

*   What `this` means
    
*   `this` in normal functions
    
*   `this` in objects
    
*   `call()`, `apply()`, and `bind()`
    
*   The difference between them
    

* * *

# What `this` Means in JavaScript

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

In simple words:

> `this` = the owner of the function at the time it runs.

Example:

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

person.greet();
```

Output

```plaintext
Hello, my name is Sayantan
```

Here:

```plaintext
person → calls greet()
```

So inside the function:

```plaintext
this = person
```

* * *

# `this` Inside Normal Functions

In a **regular standalone function**, `this` depends on how the function is called.

Example:

```plaintext
function showThis() {
  console.log(this);
}

showThis();
```

In browsers, this usually prints:

```plaintext
window
```

Because the function is called globally.

* * *

# `this` Inside Objects

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

Example:

```plaintext
const car = {
  brand: "Tesla",
  showBrand: function () {
    console.log(this.brand);
  }
};

car.showBrand();
```

Output

```plaintext
Tesla
```

Here:

```plaintext
this → car
```

because `car` is calling the method.

* * *

# What `call()` Does

The `call()` **method allows you to manually set what** `this` **should be.**

Syntax

```plaintext
functionName.call(object, arg1, arg2)
```

Example:

```plaintext
const person1 = {
  name: "Sayantan"
};

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

greet.call(person1);
```

Output

```plaintext
Hello Sayantan
```

Here:

```plaintext
call() forces this = person1
```

### call() with arguments

```plaintext
function introduce(age) {
  console.log(this.name + " is " + age + " years old");
}

introduce.call(person1, 21);
```

* * *

# What `apply()` Does

`apply()` works **almost exactly like** `call()`, but arguments are passed **as an array**.

Syntax

```plaintext
functionName.apply(object, [args])
```

Example:

```plaintext
const person2 = {
  name: "Rahul"
};

function introduce(age, city) {
  console.log(this.name + " is " + age + " and lives in " + city);
}

introduce.apply(person2, [22, "Kolkata"]);
```

Output

```plaintext
Rahul is 22 and lives in Kolkata
```

* * *

# What `bind()` Does

`bind()` creates a **new function with** `this` **permanently set**.

Unlike `call()` and `apply()`, it **does not run immediately**.

Syntax

```plaintext
const newFunction = functionName.bind(object)
```

Example:

```plaintext
const person3 = {
  name: "Ankit"
};

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

const greetPerson = greet.bind(person3);

greetPerson();
```

Output

```plaintext
Hello Ankit
```

Here:

```plaintext
bind() → returns a new function
```

* * *

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

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

Example Summary

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

* * *

# Visual Idea

```plaintext
Function → Who calls it?

Object.method()  → this = object

call()           → manually choose object
apply()          → manually choose object
bind()           → permanently bind object
```

* * *

# Assignment Practice

Try implementing the following:

### Step 1 — Create an object

```plaintext
const person = {
  name: "Sayantan",
  introduce: function(city) {
    console.log(this.name + " lives in " + city);
  }
};
```

* * *

### Step 2 — Borrow the method using `call()`

```plaintext
const student = {
  name: "Rahul"
};

person.introduce.call(student, "Delhi");
```

* * *

### Step 3 — Use `apply()` with array arguments

```plaintext
person.introduce.apply(student, ["Mumbai"]);
```

* * *

### Step 4 — Use `bind()` and store the function

```plaintext
const introStudent = person.introduce.bind(student);

introStudent("Bangalore");
```