this in Arrow Functions vs Regular Functions in JavaScript

this in Arrow Functions vs Regular Functions in JavaScript

The biggest difference between arrow and regular functions is how they handle this.

Regular Functions: this at Call Time

function Foo() {
  this.value = 1;
  setTimeout(function () {
    console.log(this.value); // undefined (this is global/undefined)
  }, 100);
}
new Foo();
``
The callback is a plain call, so `this` is not the instance.

### Arrow Functions: this at Definition Time

```js
function Foo() {
  this.value = 1;
  setTimeout(() => {
    console.log(this.value); // 1 (this is the Foo instance)
  }, 100);
}
new Foo();
``
The arrow inherits `this` from `Foo`'s scope, where `this` is the instance.

### Bug: Arrow as Object Method

```js
const obj = {
  name: "Kunal",
  greet: () => console.log(this.name),
};
obj.greet(); // undefined (this is the enclosing scope, not obj)
``
Arrow methods do not get `this` as the object. Use regular functions for methods:

```js
const obj = {
  name: "Kunal",
  greet() { console.log(this.name); }, // regular function
};
obj.greet(); // "Kunal"
``
### Rule of Thumb

- **Object methods**: regular functions (`this` is the object).
- **Callbacks inside methods/constructors**: arrows (`this` is preserved).
- **Top-level functions**: either; `this` is rarely needed.

### call/apply/bind Cannot Change Arrow's this

```js
const arrow = () => console.log(this);
arrow.call({ name: "X" }); // this is still lexical
``
### The Takeaway

Regular functions get `this` at call time. Arrows inherit `this` lexically from where they are written. Use regular functions for object methods (so `this` is the object). Use arrows for callbacks inside methods/constructors (so `this` is preserved). `call`/`apply`/`bind` cannot change an arrow's `this`.