Explain the 'this' keyword in JavaScript. How does its value change in different contexts?

Question

Accepted Answer

## Overview

The `this` keyword refers to the object that is executing the current function. Its value depends on **how** the function is called, not where it's defined.

## Different Contexts

### 1. Global Context
```javascript
console.log(this);  // window (browser) or global (Node.js)
```

### 2. Object Method
```javascript
const user = {
  name: "Alice",
  greet() {
    console.log(this.name);  // "Alice" - this = user object
  }
};
user.greet();
```

### 3. Regular Function (standalone)
```javascript
function showThis() {
  console.log(this);  // window (non-strict) or undefined (strict mode)
}
showThis();
```

### 4. Arrow Functions (lexical this)
```javascript
const user = {
  name: "Bob",
  greet: () => {
    console.log(this.name);  // undefined - arrow uses parent's this
  },
  delayedGreet() {
    setTimeout(() => {
      console.log(this.name);  // "Bob" - arrow inherits this from delayedGreet
    }, 100);
  }
};
```

### 5. Explicit Binding (call, apply, bind)
```javascript
function greet() {
  console.log(this.name);
}
const person = { name: "Charlie" };

greet.call(person);   // "Charlie"
greet.apply(person);  // "Charlie"
const boundGreet = greet.bind(person);
boundGreet();         // "Charlie"
```

## Quick Reference

| Context | this value |
|---------|------------|
| Global | window / global |
| Object method | The object |
| Regular function | window or undefined |
| Arrow function | Inherited from parent |
| call/apply/bind | Explicitly set |
| new Constructor | New instance |

## Common Gotcha

```javascript
const user = {
  name: "Dan",
  greet() { console.log(this.name); }
};

const greetFn = user.greet;
greetFn();  // undefined! - 'this' is lost

// Fix with bind:
const boundGreet = user.greet.bind(user);
boundGreet();  // "Dan"
```