Las nuevas funciones de flecha de ES6 dicen que el return está implícito en algunas circunstancias:
La expresión también es el valor de retorno implícito de esa función.
¿En qué casos necesito usar return con las funciones de flecha de ES6?
Jackson ha respondido parcialmente esto en una pregunta similar:
Retorno implícito, pero solo si no hay bloqueo.
- Esto dará como resultado errores cuando una sola línea se expanda a varias líneas y el programador se olvide de agregar un
return.- El retorno implícito es sintácticamente ambiguo.
(name) => {id: name}devuelve el objeto{id: name}... ¿verdad? Equivocado. Devuelveundefined. Esas llaves son un bloque explícito.id:es una etiqueta.
Agregaría a esto la definición de un bloque :
Una declaración de bloque (o declaración compuesta en otros idiomas) se usa para agrupar cero o más declaraciones. El bloque está delimitado por un par de corchetes.
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 de oro...
Para las funciones que son efectivamente transformadas (manipulaciones de argumentos en una sola línea), el retorno es implícito.
Los candidatos son:
// square-root value => Math.sqrt(value) // sum (a,b) => a+bPara otras operaciones (más de una línea que requieren un bloque, el retorno debe ser explícito)
Hay otro caso aquí.
Al escribir un componente funcional en React, puede usar paréntesis para envolver JSX devuelto implícitamente.
const FunctionalComponent = () => ( <div> <OtherComponent /> </div> );