usar - objetos literales javascript

¿Qué significan los paréntesis que envuelven el objeto literal en una función de flecha?

Question

Esta pregunta ya tiene una respuesta aquí:

• Función de flecha ECMAScript6 que devuelve un objeto 3 respuestas
• ¿Qué función tiene la flecha con a () después de los medios? [duplicado] 3 respuestas
• ES6 Flecha de grasa y paréntesis `(...) => ({...})` [duplicado] 2 respuestas
• ¿Qué significa la función de flecha ''() => {}'' en Javascript? [duplicado] 2 respuestas

He visto código JavaScript como este:

let a = () => ({ id: ''abc'', name: ''xyz'' })

¿A qué se refieren los paréntesis ( … ) envuelven el objeto en esta instancia? ¿Es una forma abreviada de return ?

Answer 1

Te permite crear una expresión , por lo

let a = () => ({ id: ''abc'', name: ''xyz'' })

especifica que cuando se invoca, devuelve el objeto adjunto

Si elimina el () en este caso, arrojará un error porque no es una declaración de cuerpo de función válida, porque {} en let a = () => { id: ''abc'', name: ''xyz'' } se interpretan como los límites de una declaración, pero el contenido interno no es válido si lo miras.

let a = () => {
    id: ''abc'',    /* Not valid JS syntax */
    name: ''xyz''
}

Answer 2

No. Esos paréntesis tampoco están envolviendo un objeto literal, sino que producen un objeto literal. Las funciones de flecha tienen muchas sintaxis, una de las cuales es:

( … ) => expression

Esto devolverá implícitamente una expresión, por ejemplo:

() => 1 + 1

Esta función devolverá implícitamente 1 + 1 , que es 2 . Otro es esto:

( … ) => { … }

Esto creará un bloque para albergar múltiples declaraciones si no desea devolver implícitamente una expresión, y si desea hacer cálculos intermedios o no devolver un valor en absoluto. Por ejemplo:

() => {
  const user = getUserFromDatabase();
  console.log(user.firstName, user.lastName);
}

El problema surge cuando quieres devolver implícitamente un objeto literal. No puede usar ( … ) => { … } porque se interpretará como un bloque. La solución es usar paréntesis.

Los paréntesis están ahí para que { … } se interprete como un objeto literal, no como un bloque. En el operador de agrupamiento , ( … ) , solo las expresiones pueden existir dentro de ellos. Los bloques no son expresiones, sino literales de objeto, por lo que se supone un literal de objeto. Por lo tanto, en lugar de crear un bloque, usará esta sintaxis:

( … ) => expression

Y devuelve implícitamente un objeto literal. Sin los paréntesis, se interpretará como etiquetas y cadenas, no como claves y valores de un objeto literal.

let a = () => { 
  id: ''abc'', //interpreted as label with string then comma operator
  name: ''xyz'' // interpreted as label (throws syntax error)
}

La coma aquí se interpretaría como el operador de coma , y dado que los operandos deben ser expresiones , y las etiquetas son enunciados, arrojará un error de sintaxis.