🚫 Fat Arrows Gone Wrong: When NOT to Use Arrow Functions in JavaScript ?

🧠 Quick Refresher: What’s an Arrow Function?

const sayHello = (name) => {
  console.log(`Hi, ${name}!`);
};

Simple, right? No function keyword, no return if it's one-liner, and they lexically bind this. Sounds awesome?

Get Amandeep Singh’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Not always. Let’s dive into the gotchas 👇

1. ❌ When You Need Access to this (Object Methods)

Arrow functions don’t have their own this. They grab it from the outer scope.

😵 The Oops Moment:

const user = {
  name: 'Amandeep',
  greet: () => {
    console.log(`Hi, I am ${this.name}`);
  }
};
user.greet(); // ❌ Hi, I am undefined

✅ The Fix:

const user = {
  name: 'Amandeep',
  greet() {
    console.log(`Hi, I am ${this.name}`);
  }
};
user.greet(); // ✅ Hi, I am Amandeep

🧘‍♂️ Moral: If you want to use this inside an object method, don’t use arrow functions.

2. ❌ When You Need the arguments Object

Arrow functions don’t have their own arguments object. They’ll throw a tantrum if you ask for it. 😤

😵 The Oops Moment:

const logArgs = () => {
  console.log(arguments);
};
logArgs(1, 2, 3); // ❌ ReferenceError: arguments is not defined

✅ The Fix:

function logArgs() {
  console.log(arguments); // ✅ [1, 2, 3]
}
logArgs(1, 2, 3);

📦 Use regular functions if you need to handle a variable number of arguments.

3. ❌ When You’re Creating a Constructor

Arrow functions are not constructible — you can’t use new with them.

😵 The Oops Moment:

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

✅ The Fix:

function Person(name) {
  this.name = name;
}
const p = new Person('Aman'); // ✅ All good!

🔧 Constructors need their own this, which arrow functions can’t provide.

4. ❌ When You’re Handling DOM Events (And Need ‘this’)

Arrow functions inherit this, so inside a DOM event, this won't be the element you expect.

😵 The Oops Moment:

document.querySelector('button').addEventListener('click', () => {
  console.log(this); // ❌ not the button element
});

✅ The Fix:

document.querySelector('button').addEventListener('click', function () {
  console.log(this); // ✅ refers to the button element
});

📍 Use function() when this matters in event handling.

5. ❌ When Defining Prototype Methods in Classes

Arrow functions won’t bind to the class instance correctly if used as methods.

class Timer {
  constructor() {
    this.seconds = 0;
  }
start = () => { // Works here because it's a class field
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  };
}

🧠 Just remember: for class prototype methods where this is critical — be cautious with arrows.

✅ So, When SHOULD You Use Arrow Functions?

• In short, clean one-liners 😍
• Inside array methods (map, filter, reduce, etc.)
• When you want to keep this from outer scope
• In React callbacks (e.g., onClick={() => doSomething()})

🧪 TL;DR Cheat Sheet

✅ Use Arrow ❌ Avoid Arrow Short functions Object methods needing this Callbacks in map, filter Constructor functions Lexical this is useful Using arguments React inline event handlers DOM event handlers needing this

🎉 Final Thoughts

Arrow functions are cool 😎 but not magical 🧙. They shine when used right and cause chaos when misused.

When in doubt — ask yourself:

“Do I need my own this or arguments here?”

If yes → go old-school with function.
If no → arrow away ➡️