¿Cuándo debo usar una declaración de retorno en las funciones de flecha de ES6?

Resuelto Jess Telford asked hace 9 años • 6 respuestas

Las nuevas funciones de flecha de ES6 dicen que returnestá 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 returnlas funciones de flecha de ES6?

Jess Telford avatar Mar 06 '15 05:03 Jess Telford
Aceptado

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. Vuelve undefined. 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') 
Jess Telford avatar Mar 05 '2015 22:03 Jess Telford

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

Amarsh avatar Jan 11 '2017 23:01 Amarsh

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>
);
Deci avatar Jul 06 '2018 09:07 Deci