The Overuse of Arrow Functions: A Cautionary Tale

In the world of modern JavaScript, there's a trendy tool that many developers have latched onto like a lifebuoy in a stormy sea - the arrow function. While arrow functions do have their place, it seems like everyone's using them for everything these days. And honestly, it's starting to get a bit annoying.

Arrow functions are touted for their concise syntax and implicit return, which can make simple functions look cleaner. But here's the thing: not everything in coding is simple, and not every function benefits from this conciseness. Let's talk about why the overuse of arrow functions can actually make your code less readable and more awkward.

Short and Simple Is Good, but Not Always

Sure, arrow functions are great for short, one-liner functions. They save you from typing out the word "function" and the curly braces. But what about those functions that do more than one thing? Arrow functions force you to use parentheses and braces, making your code look cramped and less intuitive.

// Arrow function for a simple one-liner
const add = (a, b) => a + b

// Arrow function for a more complex function
const multiply = (a, b) => {
  const result = a * b
  console.log(result)
  return result
}

// Write it as a proper function instead!
function multiply(a, b) {
  const result = a * b
  console.log(result)
  return result
}

Readability Matters

Coding is not just about getting the job done; it's about making your code readable and maintainable. Overusing arrow functions can make your code look like a jumble of parentheses and arrows, making it harder for your teammates (and even your future self) to understand what's going on. Look at the example above, the regular function takes less space than the arrow function!

The Mysterious this Keyword

Arrow functions are notorious for their lexical this binding. It sounds fancy, but it can be confusing. Regular functions have dynamic this, which makes it easier to understand where this is coming from. Arrow functions might surprise you when you expect this to refer to the object you're working with.

const person = {
  name: "John",
  sayHi: () => {
    console.log(`Hello, I'm ${this.name}`) // Oops, this is not what we expected!
  },
};

Where arrow functions shine!

When writing simple maps and filters, in other hand, arrow functions might be excellent, and make your code much more readable than the wordy function-function:

const angrySheeps = sheeps.filter((sheep) => sheep.isAngry);

Conclusion

So, let's be clear: arrow functions are not the enemy. They're a powerful tool, but they should be used sparingly. Don't be in such a rush to shave off a few characters from your code that you sacrifice readability and maintainability.

I used ChatGPT to help me formulate parts of this post. All opinions are sincerely mine, and based on my experience as a professional software developer.