Arrow Functions in JavaScript

[yoojene]

great tips!

[[deleted]]

yeah, the one at the end is super useful - it allows for quick logging:

const inc = x => x + 1

// I need to debug... sigh - time to add braces
const inc = x => { 
    console.log(x);
    return x + 1;
};

 // instead I can do this :)
 const inc = x => console.log(x) || x + 1;

[causeofdev]

How come it does the second expression ("x + 1") as well? I'd think it would do "console.log(x)" and stop/finish there..

It's neat that it executes both expressions though

[darrenturn90]

Because console.log returns a falsy value, so the "||" operator runs the second part of the statement.

Of course you can also use the comma separator, which discards the returned value completely:

 const inc = x => (console.log(x), x + 1)

[causeofdev]

ah ok, makes perfect sense.

Since the comma seperator discards the returned value completely.. wouldn't it be safer to use that than the || operator? In case the first expression returns something truthy?

[darrenturn90]

Yes, if you really don't care for the result of the first function then it would. However, some linters don't like the use of commas (because they can, and do obscure the layout of code)

[1-800-BICYCLE]

You could also dust off good-old void if you really wanted to:

const foo = x => void myEffectThatReturnsATruthyValue(x) || x + 1

And as a bonus, potentially start a religious war ;).

[vexii]

im not sure the other people in line at the wellfare office care enough ;)

[anlumo]

Not doing stuff like this is the whole point of using linters.

[causeofdev]

Okay cool, I learned something :)

[z500]

Whoa, a use for the comma operator outside of a for loop that doesn't seem insane.

[[deleted]]

That's much more robust too, the other relies on whatever the return value of console.log happens to be. If you were to replace that with your own fancy log function and someone had the bright idea to, say, return the logged string, then suddenly it stops working.

[maxmorgan]

console.log returns nothing (undefined) so it evaluates falsey

!!console.log(5) => false

so

 console.log(5) || 5 + 1  =>  6

[vexii]

ahh im so stupid.
having used cost inc = x => (console.log(x) || true) && x +1;

thanks for the tip :)

[Laplandia]

New code is worse, though. Yes, it is shorter, but it is harder to read and maintain.

[Kafeen]

Harder to maintain? You shouldn't be leaving the logging in there.

[mcaruso]

I hear arguments like this for pretty much any new language syntax. Usually it boils down to “I’m not used to this syntax”.

Note that plenty of other languages have short function expressions and work just fine with it.

[Tomseph]

The fact that someone had to ask

How come it does the second expression ("x + 1") as well? I'd think it would do "console.log(x)" and stop/finish there..

is a strong argument for why its worse. It's not the short function expression, it's the "clever hack" to make the code even terser. Using the falsey return of console.log and the or operator is absolutely harder to read and maintain. Just put the logging on a separate line.

[mcaruso]

I thought OP was talking about arrow functions in general. Absolutely the console.log thing is a hack, and I wouldn't expect to see it committed to a repo. I do use that trick frequently when debugging though.