Función de flecha ECMAScript 6 que devuelve un objeto

716

Al devolver un objeto de una función de flecha, parece que es necesario utilizar un conjunto adicional de {}y una returnpalabra clave 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 devuelve flecha otra cosa que no sea un objeto, el {}y returnno son necesarios, por ejemplo: p => "foo".

p => {foo: "bar"}devuelve undefined.

Una modificación p => {"foo": "bar"}arroja SyntaxError: token inesperado: ' :'” .

¿Hay algo obvio que me estoy perdiendo?

1
  • No tengo claro cuándo usar la palabra clave return y cuándo no usarla, JS es muy, muy flexible, crea un montón de errores para los nuevos usuarios de este lenguaje. Ojalá fuera tan estricto como el lenguaje "Java" 7 de abril a las 10:47
1228

Debe envolver el literal del objeto devuelto 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 es necesario que envuelva ninguna otra expresión entre paréntesis:

p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;

etcétera.

Referencia: MDN - Devolución de literales de objeto

6
  • 11
    Tengo curiosidad por saber por qué los parens marcan la diferencia. 18 de enero de 2017 a las 2:28
  • 53
    @wrschneider porque sin parens js parser piensa que es un cuerpo de función, no un objeto, y foo es una etiqueta 18 de enero de 2017 a las 13:31
  • 24
    @wrschneider más específicamente, en términos de nodos AST, el uso de paréntesis denota una declaración de expresión, en la que puede existir una expresión de objeto, mientras que, de forma predeterminada, las llaves se interpretan como una declaración de bloque. 20 de mayo de 2017 a las 7:43
  • 6
    Ni idea de por qué esto funciona, pero si desea utilizar el valor de ptan clave para el objeto literal, así es como se hace: p => ({ [p]: 'bar' }). Sin el [], será undefinedo literalmente la letra p.
    DanMan
    3 oct 2018 a las 23:52
  • 3
    @DanMan Se llama propiedades calculadas y es una característica de los objetos literales. 4 de mayo de 2020 a las 15:13
69

Puede preguntarse por qué la sintaxis es válida (pero no funciona como se esperaba):

var func = p => { foo: "bar" }

Es por la sintaxis de la etiqueta 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!
}
3
  • 6
    Las etiquetas son una característica tan rara y esotérica. ¿REALMENTE tienen algún valor? Siento que deberían ser obsoletos y eventualmente eliminados.
    Kenmore
    27 feb 2019 a las 21:51
  • 3
    @Kenmore Consulte stackoverflow.com/questions/55934490/… - compatibilidad con versiones anteriores. Los navegadores se negarán a implementar una función que rompa los sitios existentes. 11/06/19 a las 7:29
  • 3
    @Kenmore puede salir de los bucles anidados si están etiquetados. No se usa con frecuencia, pero definitivamente es útil. 26/06/19 a las 14:24
20

Si el cuerpo de la función de flecha está envuelto entre llaves, no se devuelve implícitamente. Envuelve el objeto entre paréntesis. Se vería más o menos así.

p => ({ foo: 'bar' })

Al envolver el cuerpo en parens, la función volverá { foo: 'bar }.

Con suerte, eso resuelve tu problema. Si no, recientemente escribí un artículo sobre las funciones de Arrow que lo cubre con más detalle. Espero que les sea útil. Funciones de flecha de JavaScript

1
  • ¿Por qué no tenemos que usar la palabra clave return entre paréntesis? 7 de abril a las 10:46
5

Asunto:

Cuando lo haces, estás haciendo:

p => {foo: "bar"}

El intérprete de JavaScript cree que está abriendo un bloque de código de declaraciones múltiples y, en ese bloque, debe mencionar explícitamente una declaración de retorno.

Solución:

Si la expresión de la función de flecha tiene una sola declaración , puede usar la siguiente sintaxis:

p => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"})

Pero si desea tener varias declaraciones , puede usar la siguiente sintaxis:

p => {return {foo: "bar", attr2: "some value", "attr3": "syntax choices"}}

En el ejemplo anterior, el primer conjunto de llaves abre un bloque de código de declaraciones múltiples y el segundo conjunto de llaves es para objetos dinámicos. En el bloque de código de instrucciones múltiples de la función de flecha, debe usar explícitamente declaraciones de retorno

Para obtener más detalles, consulte Mozilla Docs para JS Arrow Function Expressions

4

La función de flecha ES6 devuelve un objeto

the right ways

  1. función normal devolver un objeto

const getUser = user => {return { name: user.name, age: user.age };};

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

  1. (expresiones js)

const getUser = user => ({ name: user.name, age: user.age });

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

explicar

imagen

refs

https://github.com/lydiahallie/javascript-questions/issues/220

https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript

-6

Siempre puede consultar esto para obtener más soluciones personalizadas:

x => ({}[x.name] = x);
1
  • Esto ni siquiera devolverá un objeto nuevo. El objeto que crea allí se descarta. Esto tiene poco que ver con esta pregunta. 1 de junio a las 15:08