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

When learning JavaScript, you’ll eventually encounter a keyword that can feel confusing at first: `this`.

The value of `this` changes depending on **how a function is called**. JavaScript also provides special methods like `call()`, `apply()`, and `bind()` to control what `this` refers to.

In this article, we’ll break these concepts down in a simple and beginner-friendly way.

### 1\. What `this` Means in JavaScript (Simple Explanation)

In JavaScript, `this` **refers to the object that is currently executing the code**.

You can think of `this` as a way for a function to **refer to the object it belongs to**.

Example:

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

person.greet();
```

Output:

```plaintext
Hello, my name is Aman
```

Here:

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

So `this` helps functions **access data inside their own object**.

### 2\. `this` Inside Normal Functions

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

Example:

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

showThis();
```

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

For beginners, the important thing to remember is:

**In normal functions,** `this` **is not tied to a specific object unless we explicitly control it.**

### 3\. `this` Inside Objects

When a function is inside an object (called a **method**), `this` refers to the **object that owns the method**.

Example:

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

car.showBrand();
```

Output:

```plaintext
Toyota
```

Here:

*   `this` refers to the **car object**
    
*   `this.brand` accesses the brand property
    

This makes it easy for object methods to **work with their own data**.

### 4\. What `call()` Does

The `call()` **method** allows you to **invoke a function while manually setting the value of** `this`.

Example:

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

let user = { name: "Rahul" };

greet.call(user);
```

Output:

```plaintext
Hello Rahul
```

Here:

*   `greet` is a normal function
    
*   `call()` sets `this` to the `user` object
    

So the function behaves **as if it belongs to that object**.

You can also pass additional arguments:

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

introduce.call(user, "Delhi");
```

### 5\. What `apply()` Does

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

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

Example:

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

let user = { name: "Aman" };

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

Output:

```plaintext
Aman from Delhi, India
```

Key idea:

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

### 6\. What `bind()` Does

`bind()` is similar to `call()` and `apply()`, but it **does not execute the function immediately**.

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

Example:

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

let user = { name: "Aman" };

let greetUser = greet.bind(user);

greetUser();
```

Output:

```plaintext
Hello Aman
```

Here:

*   `bind()` returns a **new function**
    
*   That function will always use the provided `this` value
    

This is useful when passing functions as **callbacks or event handlers**.

### 7\. Difference Between `call`, `apply`, and `bind`

| Method | Executes Immediately | How Arguments Are Passed |
| --- | --- | --- |
| call() | Yes | Passed individually |
| apply() | Yes | Passed as an array |
| bind() | No | Returns a new function |

Example summary:

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

let user = { name: "Rahul" };

greet.call(user, "Delhi");
greet.apply(user, ["Mumbai"]);

let newFunc = greet.bind(user);
newFunc("Bangalore");
```

### Final Thoughts

The `this` keyword can seem confusing at first, but understanding it becomes easier with practice.

To summarize:

*   `this` **refers to the object executing the function**
    
*   Inside objects, `this` refers to the **object itself**
    
*   `call()` executes a function with a specific `this`
    
*   `apply()` works like `call()` but takes arguments as an array
    
*   `bind()` creates a new function with `this` permanently set
    

Mastering these concepts will help you better understand **how JavaScript functions interact with objects**.