# Understanding Call, Bind and Apply in JavaScript

If you have been writing JavaScript for a while, you have probably seen this behaving in unexpected ways. Sometimes it works perfectly, sometimes it gives you undefined , and you are left wondering what went wrong.

In this article, we will cover **what this means, how it behaves in different situations, and how call(), apply(), and bind() let you control it** — with simple examples throughout. By the end, **this** will no longer feel like magic.

## What is **this**?

**this** is a special keyword in JavaScript. It refers to **the object that is currently calling the function**.

The simplest way to think about it:

> **this** = who is calling the function right now

It is not fixed. It changes depending on **how** and **where** the function is called.

## **this** Inside an Object

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

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/6fba899d-64b8-4d11-9eae-899dfdba28f4.png align="center")

Here **student** is calling **greet()** — so **this** inside **greet()** refers to **student**. That is why [**this.name**](http://this.name) gives us **'Riya'**.

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/c40f7ef2-4cd9-4795-b456-7b2aa71c6b03.png align="center")

## **this** Inside a Normal Function

When a function is called on its own (not as a method), **this** refers to the **global object** — or **undefined** in strict mode.

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

showName(); // global object (window in browser) or undefined
```

This is where it slightly gets confused. The function is not attached to any object — so **this** does not know what to refer to.

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/d0bd0cc1-a737-46ba-8a1c-dba129b82810.png align="center")

**Why does the first console.log work but the second one fails?**

**The first one works:**

```javascript
console.log('Hello, I am ' + this.name); // works
```

Because this line is inside **greet()** — and greet is called as **student.greet()**. JavaScript sees *"student is calling greet"* → so **this = student** → [**this.name**](http://this.name) **= 'Riya'**

**The second one fails:**

```javascript
innerFunc(); // called on its own
```

Look at how innerFunc is called — just **innerFunc()** — no object before it! JavaScript sees *"nobody is calling innerFunc, it's just called alone"* → so **this = global object** → global object has no name property → [**this.name**](http://this.name) **= undefined**

```javascript
student.greet()  →  this = student    (student is calling it)
innerFunc()      →  this = nobody      (called alone, no object)
```

**Golden rule:** **this** is decided by WHO calls the function — not WHERE the function is written. Even though innerFunc is written inside the student object, it is called alone without any object. JavaScript does not care where you wrote it — it only cares how you called it!

## What is **call()**?

**call()** lets you **borrow a method from one object and use it with another object**.

You manually tell JavaScript — *"call this function, but set* ***this*** *to THIS object"*.

**Syntax:**

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

**Example:**

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/ef528e60-9dc7-437a-8060-42452d055219.png align="center")

**introduce** is not inside any object — but **call()** lets us set **this** to **student1** or **student2** on the fly.

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/3c5bf77b-898d-4a15-90e8-11f60f7dbf76.png align="center")

## What is **apply()**?

**apply()** does **exactly the same thing as call()** — the only difference is how you pass arguments.

*   **call()** → arguments passed **one by one**
    
*   **apply()** → arguments passed as an **array**
    

**Syntax :**

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

**Example :**

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/da0e7d51-47a6-45d8-b0d2-a733a3afc23c.png align="center")

Both give the **same output** — the only difference is the array syntax.

**When to use apply()?**

When your arguments are already stored in an array:

```javascript
const details = ['Web Dev', 'Pune'];
introduce.apply(student1, details); // convenient!
```

> **Memory trick:** **A**pply = **A**rray

## What is **bind()**?

**bind()** is different from **call()** and **apply()**. Instead of calling the function immediately, **bind()** **returns a new function** with **this** permanently set.

**Syntax:**

```javascript
const newFunc = functionName.bind(thisValue, arg1, arg2, ...)
```

**Example:**

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/f46e18af-541f-487a-954d-d4e646564d0f.png align="center")

**bind()** is useful when you want to **save a function for later use** with a specific **this** value.

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/a5440272-c212-41d5-a204-2e748a129c27.png align="center")

## Difference Between call, apply and bind

|  | Calls function immediately ? | How args are passed |
| --- | --- | --- |
| call() | yes | one by one  
fn.call(obj,a,b) |
| apply() | yes | As an array  
fn.apply(obj,\[a,b\]) |
| bind() | No  
Returns new function | One by one  
fn.bind(obj,a,b) |

**Simple memory trick:**

*   **call** → **C**all immediately, comma-separated args.
    
*   **apply** → **A**pply immediately, **A**rray args.
    
*   **bind** → **B**ind and save for later.
    

### Putting It All Together

Let us now use everything in one place.

Step 1 — Create an object with a method using **this**

Step 2 — Borrow that method using **call()**

Step 3 — Use **apply()** with array arguments

Step 4 — Use **bind()** and store the function

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/0dd217d3-3966-4e1b-ac70-e7470e57b3c2.png align="center")

**Output :**

![](https://cdn.hashnode.com/uploads/covers/696f304bc3ffcbb856137e02/41017e69-85af-4bca-bd9a-2e20ad3813da.png align="center")

## Quick Reference Summary

### What is **this**?

A keyword that refers to the object currently calling the function. Changes based on how the function is called.

### What is **call()**?

Calls a function immediately with a specific **this** value. Arguments passed one by one.

### What is **apply()**?

Same as **call()** but arguments are passed as an array. Useful when args are already in an array.

### What is **bind()**?

Returns a new function with **this** permanently locked. Does not call the function immediately.

### Key Difference

**call()** and **apply()** execute immediately. **bind()** returns a new function to call later.

## Conclusion

**this**, **call()**, **apply()**, and **bind()** are some of the most misunderstood parts of JavaScript — but once you understand that **this** simply means *"who is calling the function"*, everything else falls into place.

**call()** and **apply()** let you borrow methods and run them immediately. **bind()** lets you create a reusable function with **this** locked in. Together they give you full control over how functions execute.

Open VS Code, run the assignment steps, and experiment with your own objects. The best way to make **this** click is to break it on purpose and see what happens!