Javascript Arrow Functions are Overhyped

Since Javascript upgraded to ES2015, I have frequently seen many developers defaulting to arrow functions instead of normal functions.

I think arrow functions are cool, short, and they even look mathematical.

// traditional function

function(x) { 
  return x * x;
}

// arrow function
x => x * x;

🧐 🤨 (╯°□°）╯︵ ┻━┻

My critique is that people use them without asking why. I assume that it happens because it’s the cool way to write Javascript since it’s a newer feature than the regular functions.

Named Arrow functions can be more verbose

Using React jsx with functional components.

// a bit longer and more cryptic.
const Input = ({ num }) => { var dup = num * 2; return <>{dup}</> };

// a bit less characters and it can hoist
function Input({ num }) { var dup = num * 2; return <>{dup}</> }

An example with an array map

// have to declare function before calling it
const duplicate = x => { var res = x * 2; return res; };

[1,2,3].map(duplicate);

// vs 

// Regular functions hoist.
// I consider this easier to read since you first see the
// named function identifier and bellow you can optionally 
// look at the definition. 

[1,2,3].map(duplicate);

function duplicate(x) { var res = x * 2; return res; }

Named functions are easier to read and track

Named functions are easier to read (less cryptic), easier to debug because they appear in the call stack with their name instead of “anonymous”, they also appear named in the performance audit report.

Ending note

Put some thought when you use a feature in a programming language. Not just because that’s how the 😎“cool kids” do it you should always do it like that. Tools have their optimal use-cases. If you are writing code for a team you should consider the optimal implementations.

It had to be said, and it was said.