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

## this

The simplest way to think about `this` is: **"Who is calling the function?"**

It is a keyword that refers to the **context** (the object) that is currently executing the code. It acts like a pronoun in English instead of saying "Satpal is coding", you say "He is coding."

### `this` inside Objects

When you use `this` inside a method of an object, it refers to the object itself.

```javascript
const dev = {
  name: "Satpal",
  greet: function() {
    console.log(`Hi, I am ${this.name}`);
  }
};

dev.greet(); 
```

![](https://cdn.hashnode.com/uploads/covers/6950d1ca85602739c40abd67/8469c4b6-373f-49a9-ac49-ca36afce71cd.png align="center")

*Here,* `this` *is* `dev` *because* `dev` *is the one calling* `greet()`*.*

### `this` inside Normal Functions

In a regular function (not a method of an object), `this` defaults to the **Global Object** (`window` in browsers). If you use `strict mode`, it will be `undefined`.

## Controlling `this`: Call, Apply, and Bind

Sometimes, you want to borrow a method from one object and use it with another. This is where `call`, `apply`, and `bind` come in.

### `call()`

Calls a function immediately and allows you to pass in the `this` context explicitly, followed by arguments one by one.

```javascript
function intro(city, tech) {
  console.log(`${this.name} from ${city} loves ${tech}.`);
}

const user = { name: "Satpal" };
intro.call(user, "Ahmedabad", "Angular"); 
// Output: Satpal from Ahmedabad loves Angular.
```

### `apply()`

Exactly like `call()`, but it takes arguments as an **Array**. *Mnemonic:* ***A****pply =* ***A****rray.*

```javascript
intro.apply(user, ["Ahmedabad", "NodeJS"]);
```

### `bind()`

Instead of calling the function immediately, `bind()` **returns a new function** with the `this` context fixed. You can call it later.

```typescript
const boundIntro = intro.bind(user, "Ahmedabad", "TypeScript");
boundIntro(); // Calls the function later
```

<table style="min-width: 100px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Method</strong></p></td><td colspan="1" rowspan="1"><p><strong>Invocation</strong></p></td><td colspan="1" rowspan="1"><p><strong>Arguments</strong></p></td><td colspan="1" rowspan="1"><p><strong>Returns</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>call()</code></p></td><td colspan="1" rowspan="1"><p>Immediate</p></td><td colspan="1" rowspan="1"><p>Comma-separated</p></td><td colspan="1" rowspan="1"><p>Result of function</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>apply()</code></p></td><td colspan="1" rowspan="1"><p>Immediate</p></td><td colspan="1" rowspan="1"><p>Array <code>[]</code></p></td><td colspan="1" rowspan="1"><p>Result of function</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>bind()</code></p></td><td colspan="1" rowspan="1"><p>Later</p></td><td colspan="1" rowspan="1"><p>Comma-separated</p></td><td colspan="1" rowspan="1"><p>A new function</p></td></tr></tbody></table>

![](https://cdn.hashnode.com/uploads/covers/6950d1ca85602739c40abd67/99bcb842-c08e-4594-9ccd-f871a89dd074.png align="center")

Example

```typescript
const laptop = {
  brand: "MacBook",
  showInfo: function(ram, storage) {
    console.log(`${this.brand} with ${ram}GB RAM and ${storage}GB SSD`);
  }
};

const desktop = { brand: "Custom PC" };

// 1. Borrowing with call()
laptop.showInfo.call(desktop, 32, 1024);

// 2. Borrowing with apply()
laptop.showInfo.apply(desktop, [16, 512]);

// 3. Storing with bind()
const showDesktop = laptop.showInfo.bind(desktop);
showDesktop(64, 2048);
```

Understanding `this` is what separates a beginner from an intermediate JavaScript developer. While `this` can seem "magical", it always follows the simple rule: **look at what is to the left of the dot when the function is called.**

### **Let's Connect! 🚀**

I’m currently deep-diving into the **JavaScript**, building projects and exploring the internals of the web. If you're on a similar journey or just love talking about JavaScript, let’s stay in touch!

*   **Connect on LinkedIn:** [**Satpalsinh's Profile**](https://www.linkedin.com/in/satpalsinhrana)
    
*   **Follow my Blog:** [**blogs.satpal.cloud**](http://blogs.satpal.cloud)
    

**Keep coding and keep building.**