Arrow functions look like shortcuts, but they behave differently from regular functions in real projects. Here are 8 examples that show when to use which.

---

Introduction: Beyond Syntax

When ES6 introduced arrow functions, most developers thought: “Finally, a shorter way to write functions.”

But arrow functions aren’t just about brevity. They change how this, arguments, and scoping work — which makes them powerful in some cases and dangerous in others.

In this guide, we’ll walk through 8 real-world examples, comparing arrow functions and regular functions side by side, so you’ll know exactly when to use which.

---

1. Object Methods

Regular Function (✅ Works)

const user = {
  name: "Ali",
  greet: function () {
    return `Hi, I’m ${this.name}`;
  }
};

console.log(user.greet()); 
// "Hi, I'm Ali"

Arrow Function (❌ Breaks)

const user = {
  name: "Ali",
  greet: () => `Hi, I’m ${this.name}`
};

console.log(user.greet()); 
// "Hi, I'm undefined"

💡 Takeaway: Use regular functions for object methods. Arrow functions don’t bind this to the object.

---

2. Constructors

Regular Function (✅ Works)

function Person(name) {
  this.name = name;
}

const p = new Person("Sara");
console.log(p.name); // "Sara"

Arrow Function (❌ Fails)

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

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

💡 Takeaway: Arrows cannot be used as constructors — use traditional functions or class.

---

3. Timers and Callbacks

Regular Function (❌ Loses this)

function Timer() {
  this.seconds = 0;
  setInterval(function () {
    this.seconds++; // ❌ 'this' is Window/global
  }, 1000);
}

Arrow Function (✅ Fixes It)

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // ✅ inherits Timer's this
  }, 1000);
}

const t = new Timer();
setTimeout(() => console.log(t.seconds), 3100);
// ~3

💡 Takeaway: Use arrow functions for callbacks where you want to preserve outer this.

---

4. Event Listeners

Regular Function (✅ Useful if you need this)

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this); // ✅ Refers to the button element
});

Arrow Function (❌ Not Ideal Here)

button.addEventListener("click", () => {
  console.log(this); // ❌ Refers to Window, not button
});

💡 Takeaway: Use regular functions for event listeners when you need this bound to the element.

---

5. arguments Object

Regular Function (✅ Works)

function sum() {
  return arguments[0] + arguments[1];
}

console.log(sum(2, 3)); // 5

Arrow Function (❌ No arguments)

const sum = () => arguments[0] + arguments[1];

console.log(sum(2, 3)); 
// ReferenceError: arguments is not defined

Fix → Rest Parameters

const sum = (...args) => args[0] + args[1];

console.log(sum(2, 3)); // 5

💡 Takeaway: Use regular functions if you need arguments. Use rest ...args in arrows.

---

6. Array Methods

Regular Function (Verbose)

const numbers = [1, 2, 3];

const doubled = numbers.map(function (n) {
  return n * 2;
});

console.log(doubled); // [2, 4, 6]

Arrow Function (✅ Cleaner)

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2);

console.log(doubled); // [2, 4, 6]

💡 Takeaway: Use arrows for callbacks like map, filter, and reduce — concise and expressive.

---

7. Implicit Returns

Regular Function (Always Needs return)

function square(x) {
  return x * x;
}

Arrow Function (✅ Cleaner)

const square = x => x * x;

For objects:

const makeUser = (id, name) => ({ id, name });

console.log(makeUser(1, "Ali"));
// { id: 1, name: "Ali" }

💡 Takeaway: Use arrows when your function body is a single expression.

---

8. Hoisting

Regular Function (✅ Hoisted)

sayHi(); // Works

function sayHi() {
  console.log("Hello!");
}

Arrow Function (❌ Not Hoisted)

sayHi(); // ReferenceError

const sayHi = () => console.log("Hello!");

💡 Takeaway: Use regular functions when you want to call them before their definition.

---

Wrapping It All Up

Here are the 8 real-world comparisons:

1. Object methods → regular wins
2. Constructors → regular wins
3. Timers/callbacks → arrow wins
4. Event listeners → regular wins
5. arguments object → regular wins
6. Array methods → arrow wins
7. Implicit returns → arrow wins
8. Hoisting → regular wins

👉 The rule of thumb:

• Use arrow functions for callbacks, utilities, and functional programming.
• Use regular functions for constructors, object methods, and when you need hoisting or arguments.

---

Call to Action

👉 Which of these examples surprised you the most? Drop a comment 👇.

📤 Share this with a teammate who’s confused about arrow vs. regular functions.
🔖 Bookmark this for your next refactor session.