Que signifient les parenthèses qui entourent l'objet littéral dans une fonction flèche ?

Question

J'ai vu du code JavaScript comme celui-ci :

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

Que font les parenthèses ( … ) enveloppant l'objet auquel il se réfère dans cette instance ? S'agit-il d'un raccourci pour return ?

Answer 1

Non. Ces parenthèses produire un objet littéral. Fonctions des flèches ont de nombreuses syntaxes, dont l'une est :

( … ) => expression

Cela renverra implicitement une expression, par exemple :

() => 1 + 1

Cette fonction renvoie implicitement 1 + 1 qui est 2 . Un autre est celui-ci :

( … ) => { … }

Cela créera un bloc pour héberger plusieurs instructions si vous ne voulez pas retourner implicitement une expression, et si vous voulez faire des calculs intermédiaires ou ne pas retourner de valeur du tout. Par exemple :

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

Le problème se pose lorsque l'on veut retourner implicitement un objet littéral. Vous ne pouvez pas utiliser ( … ) => { … } car il sera interprété comme un bloc. La solution consiste à utiliser des parenthèses.

Les parenthèses sont là pour le { … } pour être interprété comme un objet littéral, et non comme un bloc. Dans le opérateur de groupage , ( … ) seules des expressions peuvent exister en leur sein. Les blocs ne sont pas des expressions mais des littéraux d'objets sont On suppose donc qu'il s'agit d'un objet littéral. Ainsi, au lieu de créer un bloc, il utilisera cette syntaxe :

( … ) => expression

Et retourner implicitement un objet littéral. Sans les parenthèses, elle sera interprétée comme étiquettes et les chaînes de caractères, et non les clés et les valeurs d'un objet littéral.

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

La virgule ici serait interprétée comme l'élément opérateur de virgule et puisque les opérandes doivent être des expressions et les étiquettes sont des déclarations, une erreur de syntaxe sera générée.

Answer 2

Il vous permet de créer un expression donc

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

précise que a lorsqu'il est invoqué, renvoie l'objet joint

Si vous retirez le () dans ce cas, il lancera une erreur car il ne s'agit pas d'une déclaration de corps de fonction valide, car l'élément {} en let a = () => { id: 'abc', name: 'xyz' } sont interprétés comme les limites d'une déclaration, mais le contenu à l'intérieur n'est pas valide si on le regarde.

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