Fat Arrows and This

One reason to choose an arrow function over a regular function or method is to preserve the this context. It's particularly useful when working with objects. To be fair, in a simple object like this, the non-arrow method makes perfect sense:

const author = {
  firstName: "Lane",
  lastName: "Wagner",
  getName() {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(author.getName());
// Prints: Lane Wagner

With a fat-arrow function, the this keyword refers to the same context as its parent. In essence, fat arrow functions "preserve" the this context. That's why this this.firstName and this.lastName are undefined in this example:

const author = {
  firstName: "Lane",
  lastName: "Wagner",
  getName: () => {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(author.getName());
// Prints: undefined undefined
// because `this` still refers to the global object
// and `firstName` and `lastName` are not defined globally

Developers working in some front-end (yuck) JavaScript frameworks (like React or Vue) tend to use fat arrow functions often. The this context can contain a ton of component-wide state, and it needs to be preserved throughout nested function calls, so fat arrows make the code easier to read and write.