When to Use Arrow Functions vs Traditional Functions in JavaScript

Since ES6, arrow functions have become popular due to their concise syntax and lexical this binding, but they are not a silver bullet and cannot fully replace the function keyword. Overusing them, especially without understanding their behavior, can cause hard‑to‑track bugs because this handling differs between arrow functions and traditional functions.

Core differences:

function: the this value is determined dynamically when the function is called, depending on the caller.

=> (arrow function): it has no own this; it captures the this of the surrounding lexical context, which remains fixed.

Understanding this leads to five scenarios where using function is the best or only correct choice.

Scenario 1: Object methods

When defining a method on an object, we usually want this to refer to the object itself.

❌ Wrong (arrow function):

const person = {
  name: '老王',
  age: 30,
  sayHi: () => {
    // this inherits from global scope, not person
    console.log(`大家好，我是 ${this.name}`);
  }
};
person.sayHi(); // outputs "大家好，我是 " or undefined

✅ Correct (function):

const person = {
  name: '老王',
  age: 30,
  sayHi: function() {
    // this is bound to person at call time
    console.log(`大家好，我是 ${this.name}`);
  },
  // ES6 method shorthand, also a function
  sayHiShorthand() {
    console.log(`大家好，我是 ${this.name}`);
  }
};
person.sayHi(); // "大家好，我是 老王"
person.sayHiShorthand(); // "大家好，我是 老王"

Conclusion: Use function or the ES6 method shorthand for object methods that need to access the object's own properties.

Scenario 2: DOM event listeners

When using addEventListener, a traditional function automatically binds this to the element that triggered the event.

❌ Wrong (arrow function):

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  // this is window or undefined, not the button
  this.classList.toggle('active');
});

✅ Correct (function):

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this); // <button id="myButton">...</button>
  this.classList.toggle('active');
});

Conclusion: Use function when the callback needs to reference the event target via this.

Scenario 3: Constructor functions

Arrow functions cannot be used as constructors because they lack their own this and prototype properties.

❌ Wrong (arrow function):

✅ Correct (function or class):

Conclusion: Never use an arrow function as a constructor; use a regular function or a class instead.

Scenario 4: Prototype methods

When adding methods to a constructor's prototype, we want this to refer to the instance.

❌ Wrong (arrow function):

✅ Correct (function):

Conclusion: Define prototype methods with function to ensure this points to the instance.

Scenario 5: Functions needing the arguments object

Arrow functions do not have their own arguments object; they inherit it from the outer scope.

❌ Wrong (arrow function):

✅ Correct (function):

Note: Modern JavaScript prefers rest parameters ( ...args), which work in both arrow and traditional functions, but when you need the legacy arguments object, only a regular function provides it.

When should you use arrow functions?

Arrow functions excel when you need lexical this binding, especially in callbacks for array methods ( map, filter, forEach), setTimeout, Promise.then, etc., where preserving the outer this context is desirable.

const timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      // this correctly refers to timer
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
};

timer.start();