Difference between ()=> and _=> and (_)=> in JS ES6

Question

I have notice that when I want to write a fat arrow function "=>" I can do _=>, ()=> or (_)=> and my code functions the same (at least for my use cases)

Is there an actual difference between them? If yes, which one should I use? I have been using ()=> most of the time, but then one day I saw someone's code using _=> and I thought it looked cool, so I started using it too.

I saw this medium article https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26 where the author states you can use _=> or ()=> but doesn't specify if there's a difference.

Answer 1

The general form of a fat-arrow function is

(parameter-list) => function-body

If you don't have any parameters, you use a pair of empty parentheses:

() => {}

If you have a single parameter it's:

(x) => {}

Since _ is a valid identifier in JavaScript, you can do:

(_) => {}

Now, a special rule applies: If you have only one parameter, you can skip the parentheses, so you get:

_ => {}

Please note that this is only valid if you have a single parameter, i.e. for two you always have to specify the parentheses:

(x, y) => {}

Now, on the right side, if your entire function only consists of a single statement with a return, such as

x => { return x; }

you can omit the curly braces and the return:

x => x

At least, this is true if on the right side you don't try to return an object, which would look like this (this code won't work!):

x => { value: x }

The reason why this does not work is that JavaScript can not distinguish this from a function body, which also uses curly braces, so now you have to wrap it in parentheses:

x => ({ value: x })

I think that's pretty much everything you need to know about the syntax of fat arrow functions.

Answer 2

You should not use something just because it looks cool.

_ is often used to tell a linter (or reader) that you do not use an certain argument on purpose.

So if you have a callback with two arguments and you only use the second one you would write (_, arg) => console.log(arg) because if you would write (foo, arg) => console.log(arg) then the linter would complain about foo not being used.

And some APIs might have different behavior depending on the number of arguments the callback has (the middlewares of expressjs are an example for that), so if the API checks the length property of the callback then you might need to use a placeholder like _.

var cb1 = _ => {};
var cb2 = () => {};

console.log(cb1.length)
console.log(cb2.length)

Answer 3

Arrow functions take any number of parameters, just like "regular" functions. When there are no parameters, this is indicated by () => {}, similarly to function() {}. If you have exactly one parameter, though, the parenthesis may be omitted. This leads to a syntax like _ => {} like you've noted — this is identical to (_) => {}, as an underscore is a valid identifier (just like foo).

The runtime difference in your specific situation seems to be none, as you're (presumably) not passing any parameters, in which case _ is undefined. You can easily verify this:

const foo = _ => console.log(_);
foo(5); // logs 5
foo(); // logs undefined

That's not to say you should do it, just that it doesn't make a difference for now. If you added a parameter later, it could wreak havoc.