# Understanding the 'this' Keyword in JavaScript

The `this` keyword is one of the most misunderstood concepts in JavaScript, but the core idea is simple. The value of `this` depends on how a function is called, not where it is written. It represents the <mark class="bg-yellow-200 dark:bg-yellow-500/30">current execution context</mark>, meaning the object that is invoking the function at that moment.

## What `this` represents

`this` refers to the object that is currently executing the function. It is determined at runtime, so the same function can have different values of `this` depending on how it is called.

## `this` in global context

In the global scope:

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

In the browser, this will refer to the `window` object. In Node.js, it typically refers to an empty object or the global object depending on the environment. The idea is that when there is no specific caller, `this` defaults to the global context.

## `this` inside objects

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

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

user.greet();
```

In this case, `this` refers to `user`, so the output is "Alexa". The object before the dot decides what `this` is.

## `this` inside functions

When a normal function is called on its own, it does not have an owner object.

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

greet();
```

In the browser, this will refer to the global object. In strict mode, it will be `undefined`. This happens because the function is not being called by any object. And in node.js we'll get reference to global object, similarly `undefined` in strict mode.

## Arrow function behaviour

Arrow functions behave differently because they do not have their own `this`. Instead, they inherit `this` from the surrounding scope.

```javascript
const user = {
  name: "Alexa",
  greet: () => {
    console.log(this.name);
  }
};

user.greet();
```

Here, `this` does not refer to `user`. It refers to whatever the surrounding context is, which is usually the global scope, so the result is `undefined`.

## How calling context changes `this`

The most important thing to understand is that `this` changes based on how a function is called.

```javascript
const user1 = {
  name: "Alexa",
  greet() {
    console.log(this.name);
  }
};

const user2 = {
  name: "Sam"
};

user2.greet = user1.greet;

user2.greet();
```

Even though the function was originally defined in `user1`, when it is called using `user2`, `this` refers to `user2`, so the output is "Sam".

Another example:

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

const fn = user.greet;
fn();
```

Here, the function is called without an object, so `this` becomes undefined (or global in non-strict mode), and the result is not what you might expect.

## Final understanding

The value of `this` is not fixed. It is determined by how a function is called. In the global context, it refers to the global object. Inside object methods, it refers to the object calling the method. Inside normal functions, it defaults to global or undefined depending on strict mode. Arrow functions do not have their own `this` and instead inherit it from their surrounding scope. Once you focus on how a function is invoked, understanding `this` becomes much clearer.