Why Facebook Limits Arrow Functions: Hidden Pitfalls Every JS Developer Should Know

Context Binding Issues

Arrow functions do not have their own this; they inherit the surrounding lexical this. This advantage can become a major hazard when the function needs its own dynamic context.

const obj = {
  data: 42,
  regularMethod: function() {
    console.log(this.data); // 42
  },
  arrowMethod: () => {
    console.log(this.data); // undefined
  }
};

In object methods, prototype methods, or any scenario requiring a dynamic this, arrow functions often produce hard‑to‑track bugs.

Prototype Method Dilemma

When an arrow function is used as a prototype method in a class or constructor, each instance creates its own copy of the function instead of sharing a single reference, increasing memory consumption.

Cannot Be Constructed

Arrow functions cannot serve as constructors; using the new operator throws an error.

const Person = (name) => {
  this.name = name;
};
const john = new Person('John'); // TypeError: Person is not a constructor

Missing arguments Object

Arrow functions do not bind an arguments object, which makes handling variable numbers of parameters inconvenient.

function regular() {
  console.log(arguments);
}
const arrow = () => {
  console.log(arguments); // Reference error or outer arguments
};

Readability Trade‑offs

While arrow functions improve brevity in simple cases, overusing them in complex logic can reduce code readability and maintainability.

Balancing Guidelines from Experienced Developers

Use arrow functions for simple function expressions, callbacks, and array methods.

Prefer traditional functions when you need this binding, arguments, or when the function may be used as a constructor.

Avoid arrow functions in class methods and object methods that rely on their own this.

Choose the style flexibly based on team conventions and project context.

Contributions and additional insights are welcome.