Arrow Functions: Do & Don’t in JavaScript

⚡ Quick Recap: What Are Arrow Functions?

Arrow functions are a concise way to define functions using the => syntax. They offer lexical binding of this and a shorter syntax.

>>“Arrow functions are lean and clean—but they come with a set of caveats you must know.”

✅ DO: Use Them for Short, Simple Functions

For small, inline functions like in array methods, arrow functions are perfect.

👍 Good Use in Array Methods

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

❌ DON’T: Use Them as Object Methods (If You Need this)

Arrow functions do not have their own this, so using them as object methods can lead to unexpected results.

🚫 Wrong Use in Object Method

const person = {
  name: "Alice",
  greet: () => {
    console.log(`Hello, ${this.name}`);
  }
};

person.greet(); // Hello, undefined 😬

Note

💡 Use traditional functions for object methods to get the correct this.

✅ DO: Use Them to Preserve this in Callbacks

Arrow functions are excellent in callbacks where you need to retain the context of the enclosing scope.

👍 Preserving this in Callback

function Timer() {
  this.count = 0;
  setInterval(() => {
    this.count++;
    console.log(this.count);
  }, 1000);
}

new Timer();

❌ DON’T: Use Them as Constructors

Arrow functions cannot be used with the new keyword.

🚫 Cannot Be Used as Constructor

const Person = (name) => {
  this.name = name;
};

const p = new Person("Bob"); // TypeError: Person is not a constructor

❌ DON’T: Use Them When You Need arguments Object

Arrow functions do not have their own arguments object.

🚫 No arguments Object

const logArgs = () => {
  console.log(arguments);
};

logArgs(1, 2); // ReferenceError: arguments is not defined

Note

🧠 Use rest parameters (...args) instead, or a regular function if needed.

✅ DO: Use Them When Binding this Is a Headache

In cases where you'd usually use .bind(this), arrow functions can simplify your life.

👍 Replaces .bind(this)

class Button {
  constructor() {
    this.label = "Click Me";
  }

  render() {
    document.body.onclick = () => {
      console.log(this.label);
    };
  }
}

📌 Summary: Arrow Function Dos & Don'ts

✅ Do❌ Don’t
Short callbacksObject methods needing this
Preserve this in callbacksConstructor functions
Replace .bind(this)Use when arguments is needed

🔗 Further Reading

>>“Use arrow functions as a tool, not a hammer. Understand their nature, and they’ll make your code cleaner and safer.”