# Understanding the this Keyword in JavaScript

## **Introduction**

In JavaScript, many beginners struggle with this keyword. In this article, we are going to discuss this keyword. Basically, in sort this keyword says who is currently responsible for the current code.

You shouldn't look at where the function is written; you must look at who called it.

Think of `this` like the word "me" in a sentence. If I say "Me," I’m talking about myself. If you say "Me," you’re talking about yourself.

That means the word doesn’t change, but who it refers to depends on who is speaking.

Simpally

> ***“***`this` ***= who is calling me?”***

### **What** `this` **represents**

In JavaScript, the `this` keyword acts like a reference, but it’s not fixed. Its value depends on where and how a function is being executed — in other words, the current execution context.

**Let’s make it simple.**

Think of `this` like a chameleon (in my language, we call it *girgit*).

A chameleon doesn’t have one fixed color. It changes its color based on its surroundings — whether it’s on a leaf, a branch, or a rock.

In the same way, `this` doesn’t have a fixed identity. It changes depending on where it is used (which object, function, or context it’s inside).

So, wherever `this` “sits”, it adapts itself to that environment — just like a chameleon changes color based on where it rests.

![](https://cdn.hashnode.com/uploads/covers/6953c37709349c47ab7f5fc0/dd479715-701b-46d3-8dba-fa090137685c.png align="center")

### `this` **in the global context**

When we talk about the Global Context, we mean the default environment where your code begins executing — before it enters any specific function or object.

In this situation, `this` behaves like our chameleon sitting on the widest possible branch — the overall environment itself.

Since there’s nothing more specific around it yet, `this` takes on the identity of that global environment.

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

*   In a browser → `this` refers to `window`
    
*   In Node.js → `this` refers to `global` object (or `{}` in modules)
    

###   
`this` **inside objects**

When a function is defined as a property of an object, it’s called a method. In this case, `this` refers to the object that owns that method.

Think of our chameleon again. When it crawls onto a specific leaf (an object), it changes its color to match that leaf perfectly. It’s no longer concerned with the whole tree — its focus is only on the leaf it’s currently on.

In the same way, `this` points to the object that the method belongs to.

**Example**

```javascript
const user = {
  name: "Pallab Karmakar",
  greet: function () {
    console.log(this.name);
  }
};

user.greet(); 
```

**Output:**

```javascript
Pallab Karmakar
```

*   `this` = `user` object
    
*   Because `user` is calling the function
    

## `this` **inside functions**

When a regular function is called on its own (not as a method of an object), `this` behaves differently.

Think of the chameleon floating in mid-air — it doesn’t have anything to hold onto, so it gets a bit confused.

In older JavaScript behavior (non-strict mode), it falls back to the global environment, so `this` it points to the global object (like `window` in browsers).

But in modern JavaScript, `"use strict"`the chameleon has nowhere to attach itself, so it becomes “invisible” — meaning `this` it is `undefined`. This helps prevent accidental changes to global data.

So in short:

*   Default mode: `this` points to the global object (`window`)
    
*   Strict mode: `this` becomes `undefined`
    

### **1 . Regular Function**

**Code example:**

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

show();
```

*   In browser → `window`
    
*   Because no object is calling it
    

### **2\. Inside Object but Regular Function**

**Code example:**

```javascript
const obj = {
  name: "JS",
  show: function () {
    console.log(this);
  }
};

obj.show(); // obj
```

**Output:**

```javascript
{ name: 'JS', show: [Function: show] }
```

### **3\. Arrow Function**

Arrow functions `() => {}` do not have their own `this`. They are like "transparent" chameleons. Instead of looking at who called them, they look at their outer environment (where they were written) and adopt that context.

**Code example:**

```javascript
const obj = {
  name: "JS",
  show: () => {
    console.log(this);
  }
};

obj.show();
```

**Output:**

```javascript
{}
```

**Note:-**

> ***Arrow functions do NOT have their own*** `this`***They take*** `this` ***from their surrounding (outer scope)***

## **How calling context changes** `this`

`this` is not attached to where a function is written — it’s decided by how the function is called.

In JavaScript, this idea is called the *call site*. So instead of looking at where the function was defined, you look at the exact place where it’s being executed.

Whoever is calling the function determines what `this` will point to.

### **1\. The "Dot" Rule (Implicit Binding)**

When a function is called as a method of an object, the object on the left side of the dot becomes the context for `this`.

Let’s understand it with a simple idea.

Imagine a `withdraw` function. If Account A calls this function, the money is taken from Account A.

If Account B calls the same function, the money is taken from Account B instead. The function doesn’t change — only the caller does.

In the same way, `this` depends on which object is calling the method, not where the function was originally written.

```javascript
function withdraw(amount) {
    this.balance -= amount;
    console.log(`${this.name} now has $${this.balance}`);
}

const accountA = { name: "Binod", balance: 100, run: withdraw };
const accountB = { name: "Baburav", balance: 50, run: withdraw };

accountA.run(20); 
accountB.run(20);
```

**Output:**

```javascript
// 'this' is accountA. Result: 
Alice now has $80

// 'this' is accountB. Result: 
Bob now has $30
```

### **2\. Losing the Context (The "Detached" Function)**

One of the most common bugs happens when you save a method into a new variable. By doing this, you "strip" the function away from its object.

**Example:-** The "chameleon" falls off the leaf and back onto the ground (the global context).

**Code:**

```javascript
const person = {
    name: "Charlie",
    greet: function() { console.log(this.name); }
};

const sayHi = person.greet; 
// We just copied the function, not the context!

sayHi(); 
```

**Output:**

```javascript
undefined (because 'this' is now the Window)
```

**But why?**

\-> Because when we called `detachedSayName()`, There was no "object to the left of the dot."

The caller became the global scope.

### Different Contexts of this

1.  Global Scope this → window
    
2.  Object Method obj.method() this → obj
    
3.  Regular Function function() this → window (or undefined in strict mode)
    
4.  Arrow Function this → inherited from parent
    

## **Conclusion**

In simple terms, `this` is not some mysterious or magical variable. It’s just a reference that answers one question: **“Who is calling this function right now?”**

Once you understand that, things become much clearer.

Getting comfortable with `this` is mostly about spotting the caller and using the right pattern — whether that’s a method, a constructor, an arrow function, or explicit binding.

As soon as these patterns start to click, `this` stops feeling confusing and becomes a predictable, useful part of writing JavaScript.