How does the this keyword work in JavaScript?

The word "this" in a sentence depends on who is speaking. If Rohit says "this bat is mine", it is Rohit's bat. If Virat says the same sentence, it is Virat's bat. The sentence is the same; the speaker changes the meaning.

In JavaScript, a normal function is the sentence, and this is the speaker. It is decided at the moment of the call, by looking at how the function was called. The same function can have a different this every time.

Arrow functions are the exception. They do not have their own this. They borrow this from the code around them, like repeating what the person next to you said.

const user = {
  name: "Priya",
  greet() {
    return "Hi, " + this.name;
  },
};

console.log(user.greet()); // Output: Hi, Priya
console.log(user.greet.call({ name: "Kiran" })); // Output: Hi, Kiran

const greetRahul = user.greet.bind({ name: "Rahul" });
console.log(greetRahul()); // Output: Hi, Rahul

const team = {
  name: "CSK",
  players: ["Dhoni", "Jadeja"],
  list() {
    // The arrow function uses list()'s this, which is team.
    return this.players.map((p) => p + " plays for " + this.name);
  },
};
console.log(team.list()); // Output: ["Dhoni plays for CSK","Jadeja plays for CSK"]

class Wallet {
  constructor(balance) {
    this.balance = balance; // with new, this is the new object
  }
}
console.log(new Wallet(500).balance); // Output: 500

The classic bug, losing this:

const greet = user.greet; // just the function, no object attached
greet(); // in strict mode or a class: this is undefined -> TypeError

Check these rules in order:

1. Called with new? this is the newly created object.
2. Called with call, apply or bind? this is the object you passed.
3. Called as a method, obj.fn()? this is obj, the thing before the dot.
4. Plain call, fn()? this is undefined in strict mode (modules and classes are always strict). In old sloppy-mode scripts it is the global object.

Arrow functions skip all four rules. Their this is fixed to whatever this was where the arrow was created, and call, apply and bind cannot change it.

• Passing a method as a callback, like button.addEventListener("click", cart.checkout), loses this. Fix it with cart.checkout.bind(cart) or an arrow wrapper () => cart.checkout().
• In DOM event handlers written as normal functions, this is the element the listener is attached to.
• In React class components, methods were bound in the constructor for this exact reason.

• Using an arrow function as an object method. this will not be the object.
• Thinking this refers to the function itself or to where the function was written.
• Extracting a method (const fn = obj.fn) and calling it alone.
• Expecting bind to work on an arrow function.

• What is the difference between call, apply and bind?
• What does this refer to inside a setTimeout callback?
• Why should you not use arrow functions as object methods?