When should I use a return statement in ES6 arrow functions
There's another case here.
For example, when writing a functional component in React, you can use parentheses to wrap implicitly returned JSX.
const FunctionalComponent = () => (
<div>
<OtherComponent />
</div>
);
I understand this rule-of-thumb ...
For functions that are effectively transforms (one-line-manipulations of arguments), return is implicit.
Candidates are:
// square-root
value => Math.sqrt(value)
// sum
(a,b) => a+b
For other operations (more than one-liners that require a block, return has to be explicit
Jackson has partially answered this in a similar question:
Implicit return, but only if there is no block.
- This will result in errors when a one-liner expands to multiple lines and the programmer forgets to add a
return
.- Implicit return is syntactically ambiguous.
(name) => {id: name}
returns the object{id: name}
... right? Wrong. It returnsundefined
. Those braces are an explicit block.id:
is a label.
I would add to this the definition of a block:
A block statement (or compound statement in other languages) is used to group zero or more statements. The block is delimited by a pair of curly brackets.
Examples:
// returns: undefined
// explanation: an empty block with an implicit return
((name) => {})()
// returns: 'Hi Jess'
// explanation: no block means implicit return
((name) => 'Hi ' + name)('Jess')
// returns: undefined
// explanation: explicit return required inside block, but is missing.
((name) => {'Hi ' + name})('Jess')
// returns: 'Hi Jess'
// explanation: explicit return in block exists
((name) => {return 'Hi ' + name})('Jess')
// returns: undefined
// explanation: a block containing a single label. No explicit return.
// more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label
((name) => {id: name})('Jess')
// returns: {id: 'Jess'}
// explanation: implicit return of expression ( ) which evaluates to an object
((name) => ({id: name}))('Jess')
// returns: {id: 'Jess'}
// explanation: explicit return inside block returns object
((name) => {return {id: name}})('Jess')