DEV Community

Discussion on: Functions, fat arrows and parentheses

View post

Replies for: Nice article! Couple of nitpicks, though: const ExampleComponent = () => { const clickHandler = () => { console.log('I was clicked')...

Collapse
 
laurieontech profile image
Laurie •

The point of the first piece is that nothing will get logged when the button is clicked because we’re talking about the behavior of the click handler. Discussing what happens when the component renders is outside the scope of the conversation.

The second example is a bit confusing. I wanted to match what happens if you execute that same thing in node and what response you see so that people can run it themselves, but it’s not a 1:1 mapping.

Collapse
 
lionelrowe profile image
lionel-rowe • • Edited

Yeah you'll get the logging output, but that's not the same as the return value. The return value is always undefined unless a) an explicit return statement is used to return something other than undefined, or b) it's a single-statement arrow function with no enclosing block:

const fn1 = () => { 5 } // returns undefined
const fn2 = function() { 5 } // returns undefined
const fn3 = () => { return 5 } // returns 5
const fn4 = () => 5 // returns 5
const fn5 = function() { return 5 } // returns 5
Enter fullscreen mode Exit fullscreen mode

In the case of console.log, even if you return console.log('...'), the return value will still be undefined, because console.log itself returns undefined.

Sorry if I'm stating the obvious or my explanation is confusing.

Some comments have been hidden by the post's author - find out more