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

JavaScript has many powerful features, but one concept that confuses beginners the most is `this`. When developers first see `this` inside a function, the biggest question usually is:

> “What exactly does `this` refer to?”

Sometimes it points to an object, sometimes it doesn't behave as expected, and this can make debugging difficult.

Understanding `this` becomes even more important when working with functions like `call()`, `apply()`, and `bind()`, which allow us to control what `this` refers to.

In this article, we will explore:

*   What `this` means in JavaScript
    
*   How `this` behaves inside functions and objects
    
*   What `call()`, `apply()`, and `bind()` do
    
*   The difference between them
    
*   Practical examples using simple objects
    

By the end, you’ll have a clear mental model of how JavaScript decides **who is calling the function**.

# What `this` Means in JavaScript

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

You can think of `this` as **the owner of the function at the moment it runs**.

In simple terms:

> `this` answers the question: **“Who called this function?”**

The value of `this` is determined **when the function is executed**, not when it is defined.

Understanding this idea makes it much easier to work with functions in JavaScript.

# `this` Inside Normal Functions

When `this` is used inside a regular function (not inside an object), its value depends on **how the function is called**.

Example:

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

showThis();
```

In browsers, this will usually log the **global object (**`window`**)**.

That means when a normal function is called without an object, JavaScript does not have a specific owner for the function, so it falls back to the global object.

This behavior often surprises beginners because they expect `this` to refer to something more specific.

# `this` Inside Objects

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

Example:

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

person.greet();
```

Output:

```plaintext
Hello, my name is Rith
```

Here:

*   `greet()` is called by the `person` object
    
*   Therefore, `this` **refers to** `person`
    

So JavaScript follows a simple rule:

> **The object before the dot is the value of** `this`**.**

```plaintext
person.greet()
      ↑
     this
```

# Understanding “Who is Calling the Function”

A useful way to think about `this` is to ask:

> **Who is calling the function?**

Consider this example:

```javascript
const user1 = {
  name: "Alice",
  sayName: function () {
    console.log(this.name);
  }
};

const user2 = {
  name: "Bob"
};

user1.sayName();
```

Output:

```plaintext
Alice
```

Now suppose we use the same function with another object.

This is where `call()`, `apply()`, and `bind()` become useful.

They allow us to **manually control what** `this` **should refer to.**

# What `call()` Does

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

In other words, we can **borrow a function and run it for another object**.

Example:

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

const person2 = {
  name: "Bob"
};

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

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

Output:

```plaintext
Hello, I am Alice
Hello, I am Bob
```

Here:

*   We used the same `greet` function
    
*   But we changed **who** `this` **refers to**
    

`call()` syntax:

```javascript
functionName.call(thisArg, arg1, arg2, ...)
```

So the first argument sets the value of `this`.

# What `apply()` Does

The `apply()` **method works almost the same as** `call()`.

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

With `apply()`, arguments are passed **as an array**.

Example:

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

const person = {
  name: "Rith"
};

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

Output:

```plaintext
Rith is 22 years old and lives in Kolkata
```

Syntax:

```javascript
functionName.apply(thisArg, [arg1, arg2])
```

So the key idea is:

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

# What `bind()` Does

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

Instead, it **creates a new function with** `this` **permanently set to a specific object**.

Example:

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

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

const greetPerson = greet.bind(person);

greetPerson();
```

Output:

```plaintext
Hello, I am Rith
```

Here:

*   `bind()` returns a **new function**
    
*   The value of `this` is fixed to `person`
    

This is useful when passing functions around, such as in **event handlers or callbacks**.

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

| Method | Executes Immediately | How Arguments Are Passed | Return Value |
| --- | --- | --- | --- |
| `call()` | Yes | Arguments separately | Result of the function |
| `apply()` | Yes | Arguments as an array | Result of the function |
| `bind()` | No | Arguments separately | Returns a new function |

Quick summary:

*   `call()` → run function immediately with custom `this`
    
*   `apply()` → same as call but arguments in array
    
*   `bind()` → create a new function with fixed `this`
    

# Practical Example: Method Borrowing

Method borrowing is a common use case for `call()`.

Example:

```javascript
const person1 = {
  name: "Rith",
  greet: function () {
    console.log("Hello, I am " + this.name);
  }
};

const person2 = {
  name: "Alex"
};

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

Output:

```plaintext
Hello, I am Alex
```

Here we **borrowed the** `greet` **method** from `person1` and used it for `person2`.

This works because `call()` allows us to set `this` manually.

# Visual Idea: Function → Caller Relationship

You can imagine the relationship like this:

```plaintext
Object ----calls----> Function
   ↑                     |
   |                     |
   -------- this --------
```

Whichever object calls the function becomes the value of `this`.

And with `call`, `apply`, and `bind`, we can **manually choose the caller**.

# Conclusion

Understanding `this` is an important step in mastering JavaScript. Instead of thinking of it as something mysterious, it becomes much clearer when you remember one rule:

> `this` **refers to the object that calls the function.**

The methods `call()`, `apply()`, and `bind()` give us control over what `this` refers to, making functions more flexible and reusable.

To recap:

*   `this` depends on **how a function is called**
    
*   `call()` lets us call a function with a specific `this`
    
*   `apply()` does the same but accepts arguments as an array
    
*   `bind()` creates a new function with a fixed `this`
    

Once you understand these concepts, you'll find it much easier to work with objects, functions, and advanced JavaScript patterns.