# JavaScript this, call(), apply() & bind() 

If you've ever seen JavaScript code like:

```js
this.name
```

and wondered:

> **"What exactly is** `this`**?"**

You're not alone.

`this` is one of those JavaScript concepts that looks simple but becomes confusing when the same function is called in different ways.

The good news is that you don't need to understand complicated JavaScript internals to get started.

A powerful beginner-friendly way to think about it is:

> `this` **usually tells us who is calling the function.**

And when we want to control who `this` refers to, JavaScript gives us three useful methods:

*   `call()`
    
*   `apply()`
    
*   `bind()`
    

Let's understand all four concepts together.

* * *

## What Does `this` Mean?

Consider this object:

```js
const person = {
  name: "Maaz",
  age: 20,

  introduce() {
    console.log(`I'm ${this.name} and I'm ${this.age} years old.`);
  }
};
```

Now call the method:

```js
person.introduce();
```

Who is calling `introduce()`?

```text
person.introduce()
      │
      │ calls
      ↓
 introduce()
      │
      ↓
    this
      │
      ↓
   person
```

So:

```js
this.name
```

means:

```js
person.name
```

and:

```js
this.age
```

means:

```js
person.age
```

Output:

```text
I'm Maaz and I'm 20 years old.
```

### The mental model

When you're learning `this`, ask:

> **"Who is calling this function?"**

For an object method:

```js
object.method();
```

the object before the `.` is generally the value of `this`.

```text
object.method()
      │
      ↓
   caller
      │
      ↓
    this
```

This simple rule will solve many beginner-level `this` problems.

* * *

## `this` Inside Normal Functions

## Now remove the object.

```js
function greet() {
  console.log(this);
}

greet();
```

This is a **normal function call**.

There is no object before the function:

```js
greet();
```

Therefore, `this` is not automatically the object you might expect.

In strict mode:

```js
"use strict";

function greet() {
  console.log(this);
}

greet();
```

the result is:

```text
undefined
```

In non-strict browser code, a regular function call can have `this` refer to the global object.

So don't memorize:

> "`this` always equals the caller."

A better rule is:

> **For normal functions,** `this` **depends on how the function is called.**

That's why this works differently:

```js
person.introduce();
```

and:

```js
introduce();
```

The calling style changed.

* * *

## `this` Inside Objects

Object methods are where `this` becomes easiest to understand.

```js
const user = {
  name: "Maaz",

  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet();
```

The relationship is:

```text
       user
        │
        │ calls
        ↓
      greet()
        │
        ↓
      this
        │
        ↓
       user
```

Output:

```text
Hello, Maaz
```

But here's where JavaScript gets interesting.

What happens if we take the function away from the object?

```js
const greetFunction = user.greet;

greetFunction();
```

We're no longer doing:

```js
user.greet();
```

We're doing:

```js
greetFunction();
```

The calling context has changed.

```text
Before:

user.greet()
     ↓
 this = user


After:

greetFunction()
     ↓
Different calling context
     ↓
Different `this`
```

This is the key reason `call()`, `apply()`, and `bind()` are useful.

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

**For a deeper dive, read** [**this blog**](https://maazzz.hashnode.dev/javascript-this-keyword-explained-simply?utm_source=hashnode&utm_medium=feed) **post.**

* * *

## Why Do We Need `call()`, `apply()` and `bind()`?

Imagine we have a function:

```js
function introduce() {
  console.log(`I'm ${this.name}`);
}
```

The function expects `this.name`.

But by itself, it doesn't know which person's `name` we want.

We can explicitly tell JavaScript:

> "For this function call, use this object as `this`."

That's exactly what `call()` and `apply()` help us do.

And `bind()` lets us create a **new function with** `this` **permanently set to the object we choose**.

* * *

## What Does `call()` Do?

The `call()` method allows us to call a function while explicitly choosing what `this` should refer to.

Syntax:

```js
function.call(thisValue, arg1, arg2, ...);
```

Let's use a simple example:

```js
function introduce() {
  console.log(`I'm ${this.name} and I'm ${this.age} years old.`);
}

const person = {
  name: "Maaz",
  age: 20
};

introduce.call(person);
```

Output:

```text
I'm Maaz and I'm 20 years old.
```

What happened?

```text
introduce.call(person)
          │
          ↓
    this = person
          │
          ↓
   introduce() runs
```

So `call()` basically lets us say:

> **"Call this function and use this object as** `this`**."**

* * *

## Passing Arguments With `call()`

`call()` can also pass arguments individually.

```js
function introduce(city, profession) {
  console.log(
    `I'm ${this.name} from ${city}. I work as a ${profession}.`
  );
}

const person = {
  name: "Maaz"
};

introduce.call(person, "Multan", "Software Engineer");
```

Output:

```text
I'm Maaz from Multan. I work as a Software Engineer.
```

The structure is:

```text
call(
  thisValue,
  argument1,
  argument2
)
```

For example:

```js
introduce.call(person, "Multan", "Software Engineer");
                  │         │          │
                  │         └──────────┴── arguments
                  │
                  └── this
```

* * *

## What Does `apply()` Do?

`apply()` is very similar to `call()`.

It also:

1.  Calls the function immediately.
    
2.  Lets you choose what `this` refers to.
    

The main difference is **how arguments are provided**.

With `call()`:

```js
introduce.call(person, "Multan", "Software Engineer");
```

Arguments are passed individually.

With `apply()`:

```js
introduce.apply(
  person,
  ["Multan", "Software Engineer"]
);
```

Arguments are passed inside an **array** (more precisely, an array-like argument list).

Example:

```js
function introduce(city, profession) {
  console.log(
    `I'm ${this.name} from ${city}. I work as a ${profession}.`
  );
}

const person = {
  name: "Maaz"
};

const details = ["Multan", "Software Engineer"];

introduce.apply(person, details);
```

Output:

```text
I'm Maaz from Multan. I work as a Software Engineer.
```

Think of it like this:

```text
call()
  │
  ├── this
  ├── argument 1
  └── argument 2


apply()
  │
  ├── this
  └── [argument 1, argument 2]
```

* * *

## `call()` vs `apply()`

The easiest way to remember the difference:

```text
call()
→ arguments separately

apply()
→ arguments in an array
```

Example:

```js
// call
fn.call(obj, 10, 20);

// apply
fn.apply(obj, [10, 20]);
```

Both call the function immediately.

Both allow you to control `this`.

Only the argument format is different.

* * *

## What Does `bind()` Do?

Now comes the important difference.

`bind()` does **not immediately call the function**.

Instead, it creates a **new function** with `this` set to the object you provide.

Example:

```js
function introduce() {
  console.log(`I'm ${this.name}`);
}

const person = {
  name: "Maaz"
};

const boundIntroduce = introduce.bind(person);
```

Nothing has been printed yet.

Why?

Because `bind()` only creates the new function.

We call it later:

```js
boundIntroduce();
```

Output:

```text
I'm Maaz
```

The flow is:

```text
introduce.bind(person)
          │
          ↓
   New function created
          │
          ↓
   boundIntroduce
          │
          │ later
          ↓
   boundIntroduce()
          │
          ↓
     this = person
```

This is the biggest difference between `bind()` and the other two.

* * *

## A Realistic `bind()` Example

`bind()` becomes especially useful when a function needs to be passed somewhere else but still needs the correct `this`.

For example:

```js
const user = {
  name: "Maaz",

  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const greetUser = user.greet.bind(user);

greetUser();
```

Output:

```text
Hello, Maaz
```

We created a new function that remembers:

```text
this → user
```

Even though we're calling:

```js
greetUser();
```

instead of:

```js
user.greet();
```

* * *

## The Big Difference: `call()` vs `apply()` vs `bind()`

Here's the comparison you should remember:

| Method | Calls immediately? | How arguments are passed | Main purpose |
| --- | --- | --- | --- |
| `call()` | ✅ Yes | Individually | Call with a specific `this` |
| `apply()` | ✅ Yes | Array | Call with a specific `this` |
| `bind()` | ❌ No | Individually | Create a new function with fixed `this` |

The visual version:

```text
                 Function
                    │
          ┌─────────┼─────────┐
          ↓         ↓         ↓
        call()    apply()    bind()
          │         │         │
          ↓         ↓         ↓
       Execute    Execute    Create
       now        now        new function
          │         │         │
      args:       args:      this:
      separate   array       fixed
```

* * *

## One Example Showing All Three

Let's make the difference crystal clear.

```js
function introduce(city, job) {
  console.log(
    `${this.name} lives in ${city} and works as a ${job}.`
  );
}

const person = {
  name: "Maaz"
};
```

### Using `call()`

```js
introduce.call(
  person,
  "Multan",
  "Software Engineer"
);
```

**Calls immediately.**

Arguments are separate.

* * *

### Using `apply()`

```js
introduce.apply(
  person,
  ["Multan", "Software Engineer"]
);
```

**Calls immediately.**

Arguments are inside an array.

* * *

### Using `bind()`

```js
const introduceMaaz = introduce.bind(
  person,
  "Multan",
  "Software Engineer"
);

introduceMaaz();
```

**Doesn't call immediately.**

Instead, it creates a new function that remembers the provided `this` and arguments.

* * *

## A Simple Memory Trick

If you forget everything else, remember:

```text
CALL
→ Call it now
→ Arguments separately

APPLY
→ Apply it now
→ Arguments as an array

BIND
→ Bind it for later
→ Returns a new function
```

Or:

> **Call = now** **Apply = now + array** **Bind = later**

* * *

## Borrowing Methods With `call()`

One useful feature of `call()` is **method borrowing**.

Imagine:

```js
const person1 = {
  name: "Maaz",

  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const person2 = {
  name: "Ali"
};
```

`person2` doesn't have a `greet()` method.

But we can borrow `person1`'s method:

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

Output:

```text
Hello, Ali
```

Why?

Because we explicitly changed `this`:

```text
person1.greet
      │
      │ call(person2)
      ↓
  this = person2
      │
      ↓
Hello, Ali
```

The function comes from `person1`, but during this call, `this` refers to `person2`.

That's the power of explicitly controlling the calling context.

* * *

## Your Practice Assignment

Try this yourself before looking back at the examples.

### Step 1 — Create an object

Create an object with:

*   `name`
    
*   `age`
    
*   a `introduce()` method using `this`
    

For example, your object should conceptually look like:

```text
person
├── name
├── age
└── introduce()
```

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

Create another object and use:

```js
person.introduce.call(otherPerson);
```

Observe which person's data is printed.

### Step 3 — Use `apply()`

Create a function that accepts two arguments.

Call it using:

```js
functionName.apply(object, [arg1, arg2]);
```

### Step 4 — Use `bind()`

Create a new function:

```js
const newFunction = functionName.bind(object);
```

Then call it later.

Your goal is to understand what changes when you change the **calling context**.

* * *

## The Mental Model to Keep

When you encounter `this`, start with one question:

> **"How is this function being called?"**

Then remember:

```text
object.method()
      ↓
this → object
```

If you want to manually control `this`:

```text
call()
  ↓
Call now + separate arguments


apply()
  ↓
Call now + array arguments


bind()
  ↓
Create a new function for later
```

And the complete relationship becomes:

```text
                    FUNCTION
                       │
            ┌──────────┴──────────┐
            ↓                     ↓
       Normal call          Explicit control
            │                     │
            ↓              ┌──────┼──────┐
     depends on how       call() apply() bind()
     it is called           │       │       │
                            ↓       ↓       ↓
                           now     now    later
```

* * *

# **What to Remember**

JavaScript's `this` becomes much easier when you stop treating it as a mysterious keyword.

Think about the **calling context**.

When an object calls a method:

```js
user.greet();
```

`this` generally refers to `user`.

When you need to explicitly control `this`, JavaScript gives you:

```js
call()
apply()
bind()
```

The difference is simple:

```text
call()
→ immediately calls the function
→ arguments separately

apply()
→ immediately calls the function
→ arguments as an array

bind()
→ does not call immediately
→ returns a new function
→ remembers the chosen `this`
```

The most important thing to remember is:

> `call()` **and** `apply()` **call a function now.** `bind()` **prepares a function to be called later.**

Once you understand that relationship, `this`, method borrowing, and function binding become much less confusing—and you'll have a much stronger foundation for understanding JavaScript's more advanced object-oriented patterns.