# Understanding this in JavaScript 

One of the most confusing topics for beginners in JavaScript is the keyword `this`. Many developers initially assume that `this` refers to the function itself or some fixed object. However, in JavaScript, `this` works differently. It does not refer to where a function is written — it refers to **who is calling the function**.

A helpful way to understand `this` is to imagine a **microphone on a stage**. Whoever is holding the microphone is the one speaking. The microphone represents `this`. When the same function is called by different objects, `this` changes depending on the caller.

Because JavaScript is flexible and functions can be used in many contexts, the value of `this` can change depending on how the function is invoked. This behavior becomes extremely important when working with objects, event handlers, and advanced features like `call()`, `apply()`, and `bind()`.

In this guide, we will explore how `this` behaves in different situations, including global context, inside functions, inside objects, and when using `call`, `apply`, and `bind`.

* * *

## What `this` Means in JavaScript

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

When a function runs, JavaScript determines the value of `this` based on the **execution context** of the function call.

To observe this behavior, consider the following example.

```javascript
console.log(this);
```

In a browser environment, the output will usually be the global object (`window`). In Node.js, it may refer to a different global object depending on the environment.

This means that when code runs at the **global level**, `this` refers to the global execution context.

Now consider the following function.

```javascript
function ranveerOnGlobalStage() {
  return typeof this;
}

console.log(ranveerOnGlobalStage()); // object
```

Even though the function does not belong to an object, the function is called in the global context. Therefore, `this` refers to the global object.

This shows an important rule: **if a normal function is called without an owner object,** `this` **usually refers to the global object** (unless strict mode changes this behavior).

Understanding this concept is essential because it explains why `this` sometimes behaves unexpectedly in JavaScript.

* * *

## `this` Inside Normal Functions

When `this` appears inside a normal function, its value depends entirely on **how the function is called**.

Consider this example.

```javascript
function ranveerWithNoScript() {
  return this;
}

console.log(ranveerWithNoScript()); // global object
```

Here the function is called directly, without any object. Because of that, the caller is the global environment.

Therefore, `this` refers to the **global object**.

This behavior surprises many beginners because the function itself does not appear connected to any object.

However, the rule remains consistent:

**JavaScript decides the value of** `this` **based on the caller of the function.**

If a function is called without an explicit object, the global object becomes the caller.

This is why developers must always pay attention to **how a function is invoked**, not just where it is defined.

* * *

## `this` Inside Objects

Objects provide one of the most common and useful uses of `this`.

When a function is defined inside an object and called through that object, `this` refers to **that object**.

Example:

```javascript
const bollywoodFilm = {
  name: "Bajirao Mastani",
  lead: "Ranveer",

  introduce() {
    return `${this.lead} performs in ${this.name}`;
  },
};

const bollywoodFilm2 = {
  name: "Dhurandhar",
  lead: "Ranveer",

  introduce() {
    return `${this.lead} performs in ${this.name}`;
  },
};

console.log(bollywoodFilm.introduce()); // Ranveer performs in Bajirao Mastani
console.log(bollywoodFilm2.introduce()); // Ranveer performs in Dhurandhar
```

Here the same method name exists in two objects. The value of `this` changes depending on the object calling the function.

When `bollywoodFilm.introduce()` runs, `this` refers to `bollywoodFilm`.

When `bollywoodFilm2.introduce()` runs, `this` refers to `bollywoodFilm2`.

This is why `this` is so powerful. It allows functions to dynamically work with the object that invokes them.

* * *

## `this` Inside Nested Functions and Arrow Functions

A very common confusion happens when functions are nested inside other functions.

Example:

```javascript
const filmSet = {
  crew: "Spot boys",

  prepareProps() {
    console.log(`Outer this.crew: ${this.crew}`);

    function arrangeChairs() {
      console.log(`Inner this.crew: ${this.crew}`);
    }

    arrangeChairs();

    const arrangeLights = () => {
      console.log(`Arrow this.crew: ${this.crew}`);
    };

    arrangeLights();
  },
};

filmSet.prepareProps();
```

Output explanation:

*   `Outer this.crew` → Spot boys
    
*   `Inner this.crew` → undefined
    
*   `Arrow this.crew` → Spot boys
    

Why does this happen?

Normal functions create their own `this` context. Since `arrangeChairs()` is called as a normal function, `this` becomes the global object.

Arrow functions behave differently. They **do not create their own** `this`. Instead, they inherit `this` from their surrounding scope.

Therefore, `arrangeLights()` correctly accesses `filmSet.crew`.

* * *

## Detached Methods and `this`

Another important scenario occurs when methods are separated from their objects.

```javascript
const actor = {
  name: "Ranveer",
  bow() {
    return `${this.name} takes a bow`;
  },
};

console.log(actor.bow()); // Ranveer takes a bow

const detachedBow = actor.bow;

console.log(detachedBow()); // undefined takes a bow
```

Here the method was detached from its object.

When `detachedBow()` runs, it is no longer called by `actor`. Therefore, `this` loses its connection to the object.

This demonstrates a key idea:

**When a function is detached from its object, it loses its original** `this` **context.**

This situation often occurs when functions are passed as callbacks.

* * *

## What `call()` Does

The `call()` method allows us to **manually specify what** `this` **should refer to**.

Example:

```javascript
function cookDish(ingredient, style) {
  return `${this.name} prepares ${ingredient} in ${style} style !`;
}

const sharmaKitchen = { name: "Sharma jis Kitchen" };

console.log(cookDish.call(sharmaKitchen, "Paneer and spices", "Muglai"));
// Sharma jis Kitchen prepares Paneer and spices in Muglai style !
```

Here `cookDish` does not belong to `sharmaKitchen`. However, by using `call()`, we temporarily assign `this` to `sharmaKitchen`.

`call()` takes arguments individually after the object reference.

* * *

## What `apply()` Does

`apply()` works almost exactly like `call()`.

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

Instead of passing arguments separately, `apply()` expects them inside an array.

Example:

```javascript
const guptaKitchen = { name: "Gupta jis Kitchen" };

const guptaOrder = ["Chole kulche", "Punjabi Dhaba"];

console.log(cookDish.apply(guptaKitchen, guptaOrder));
// Gupta jis Kitchen prepares Chole kulche in Punjabi Dhaba style !
```

A popular use case for `apply()` is working with arrays.

Example:

```javascript
const bills = [100, 30, 45, 50];

Math.max.apply(null, bills);
Math.max(...bills);
```

Both approaches return the maximum number.

* * *

## What `bind()` Does

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

Instead, it **returns a new function with** `this` **permanently bound**.

Example:

```javascript
function reportDelivery(location, status) {
  return `${this.name} at ${location}: ${status}`;
}

const deliveryBoy = { name: "Ranveer" };

const bindReport = reportDelivery.bind(deliveryBoy);

console.log(bindReport("Haridwar", "WHAT"));
// Ranveer at Haridwar: WHAT
```

Here `bind()` creates a new function where `this` always refers to `deliveryBoy`.

This technique is extremely useful when passing methods into callbacks or event handlers.

* * *

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

These three methods are closely related, but their behavior differs slightly.

| Method | Execution | Arguments Style | Returns |
| --- | --- | --- | --- |
| call | Executes immediately | Arguments individually | Function result |
| apply | Executes immediately | Arguments as array | Function result |
| bind | Does not execute immediately | Arguments individually | New bound function |

Example comparison:

```javascript
console.log("Call: ", reportDelivery.call(deliveryBoy, "Lyari", "Ordered"));
// Call: Ranveer at Lyari: Ordered

console.log("Apply: ", reportDelivery.apply(deliveryBoy, ["Mars", "Pick up"]));
// Apply: Ranveer at Mars: Pick up

console.log("Bind: ", reportDelivery.bind(deliveryBoy, "Haridwar", "WHAT"));
// returns a new function
```

* * *

## Conclusion

The `this` keyword is one of the most dynamic features of JavaScript. Instead of referring to where a function is written, it refers to **who is calling the function**. This behavior allows functions to operate on different objects depending on the context in which they are used. Understanding how `this` works in normal functions, inside objects, and inside arrow functions is essential for writing reliable JavaScript code.

Methods such as `call()`, `apply()`, and `bind()` give developers precise control over the value of `this`, making it possible to reuse functions across different objects. Mastering these concepts helps developers avoid confusing bugs and unlocks powerful programming patterns used in modern JavaScript applications.