¿Cuándo debo usar una declaración de retorno en las funciones de flecha de ES6?
Las nuevas funciones de flecha de ES6 dicen que return
está implícita en algunas circunstancias:
La expresión también es el valor de retorno implícito de esa función.
¿ En qué casos necesito utilizar return
las funciones de flecha de ES6?
Jackson respondió parcialmente a esto en una pregunta similar:
Retorno implícito, pero sólo si no hay ningún bloque.
- Esto dará lugar a errores cuando una sola línea se expanda a varias líneas y el programador se olvide de agregar un archivo
return
.- El retorno implícito es sintácticamente ambiguo.
(name) => {id: name}
devuelve el objeto{id: name}
... ¿verdad? Equivocado. Vuelveundefined
. Esas llaves son un bloque explícito.id:
es una etiqueta.
Yo agregaría a esto la definición de bloque :
Una declaración en bloque (o declaración compuesta en otros idiomas) se utiliza para agrupar cero o más declaraciones. El bloque está delimitado por un par de llaves.
Ejemplos :
// 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')
Entiendo esta regla general...
Para funciones que se transforman efectivamente (manipulaciones de argumentos en una línea), el retorno es implícito.
Los candidatos son:
// square-root
value => Math.sqrt(value)
// sum
(a,b) => a+b
Para otras operaciones (más de una línea que requiera un bloque, el retorno debe ser explícito
Hay otro caso aquí.
Por ejemplo, al escribir un componente funcional en React, puede usar paréntesis para envolver el JSX devuelto implícitamente.
const FunctionalComponent = () => (
<div>
<OtherComponent />
</div>
);