Arrow Functions Explained

Arrow functions (=>) are a shorter way to write functions. They appear in React event handlers, array methods, and Node.js middleware. Every modern codebase uses them daily.

Syntax comparison

// Old way
function add(a, b) {
  return a + b;
}

// Arrow function — same behavior
const add = (a, b) => a + b;

// Multiple lines — use { } and return
const greet = (name) => {
  const msg = 'Welcome, ' + name;
  return msg;
};

When to use arrow functions

• Callbacks: items.map(item => item.price)
• Short helpers: const double = n => n * 2
• React: onClick={() => setOpen(true)}

const invoices = [
  { id: 1, amount: 500, paid: true },
  { id: 2, amount: 1200, paid: false },
  { id: 3, amount: 799, paid: true }
];

const paidTotal = invoices
  .filter(inv => inv.paid)
  .map(inv => inv.amount)
  .reduce((sum, amt) => sum + amt, 0);

console.log(paidTotal); // 1299

Arrow vs regular function — this

Arrow functions do not have their own this. They inherit this from the surrounding scope. That is why React class components used bind(), but functional components + arrows “just work”.

const timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++;  // ✅ this = timer object
    }, 1000);
  }
};