Al devolver un objeto de una función de flecha, parece que es necesario usar un conjunto adicional de {} y una palabra clave de return debido a una ambigüedad en la gramática.
Eso significa que no puedo escribir p => {foo: "bar"} , pero tengo que escribir p => { return {foo: "bar"}; } .
Si la función de flecha devuelve algo que no sea un objeto, el {} y el return son innecesarios, por ejemplo: p => "foo" .
p => {foo: "bar"} devuelve undefined .
Un p => {"foo": "bar"} modificado arroja “ SyntaxError : token inesperado: ' : '” .
¿Hay algo obvio que me estoy perdiendo?
Debe envolver el literal del objeto que regresa entre paréntesis. De lo contrario, se considerará que las llaves denotan el cuerpo de la función. Los siguientes trabajos:
p => ({ foo: 'bar' });No necesita envolver ninguna otra expresión entre paréntesis:
p => 10; p => 'foo'; p => true; p => [1,2,3]; p => null; p => /^foo$/;y así.
Referencia: MDN - Devolver objetos literales
Puede preguntarse por qué la sintaxis es válida (pero no funciona como se esperaba):
var func = p => { foo: "bar" }Es debido a la sintaxis de etiquetas de JavaScript :
Entonces, si transpila el código anterior a ES5, debería verse así:
var func = function (p) { foo: "bar"; //obviously no return here! }Si el cuerpo de la función flecha está entre llaves, no se devuelve implícitamente. Envuelva el objeto entre paréntesis. Se vería algo como esto.
p => ({ foo: 'bar' }) Al envolver el cuerpo entre paréntesis, la función devolverá { foo: 'bar } .
Con suerte, eso resuelve tu problema. Si no, recientemente escribí un artículo sobre las funciones de flecha que lo cubre con más detalle. Espero que les sea útil. Funciones de flecha de Javascript