1
votes

À quoi servent les parenthèses entourant les crochets dans l'instruction de retour d'une fonction de flèche ES6?

Par exemple, dans les actions redux, j'ai vu dans le code de quelqu'un:

const updateChatMessage = text => ({
   type: types.someActionType,
   text
})

et:

export const updateMessage = text => {
   return (dispatch) => {
     dispatch(updateChatMessage(text))
   }
}

cela semble fonctionner comme un implique un return mais je pensais que cela était déjà impliqué dans une flèche fonctions des crochets suivant la grosse flèche.

Que font les parenthèses ({...}) ? sont-ils nécessaires? Existe-t-il une autre façon d'accomplir la même chose?

javascript ecmascript-6 arrow-functions

1 commentaires

c'est ainsi que vous renvoyez un objet dans des fonctions fléchées avec un corps concis - voir docs recherchez Renvoi de littéraux d'objet

4 Réponses :

5
votes

lorsque vous écrivez myFunction = value => ({prop: value}) il renvoie l'objet {prop: value} , dans ce cas {} sont un délimiteur d'objet et non un 'délimiteur de fonction'

let array = [{val: 2},
             {val: 4},
             {val: 8},
             {val: 16}];
             
let output = array.map( ({val}) => ({val: val*2}) );

console.log(output);

autre par exemple:

lorsque vous voulez multiplier par deux chaque élément d'un tableau, vous pouvez écrire:

array.map (elem => {return elem * 2})

array.map (elem => elem * 2) // même résultat

et si vous voulez un exemple avec () qui enveloppe un objet littéral:

const updateChatMessage = text => ({
   type: types.someActionType,
   text
})

0 commentaires

2
votes

Si vous entourez les crochets avec des parenthèses, vous faites en sorte que votre fonction renvoie un objet littéral (vous n'avez donc pas besoin du mot-clé return). Si vous n'utilisez pas de parenthèses, vous devez utiliser le mot-clé return.

0 commentaires

0
votes

Dans le premier exemple, les {} sont utilisés pour identifier plusieurs lignes de code, c'est pourquoi le retour est requis afin d'obtenir autre chose que undefined .

Dans le deuxième exemple, les {} sont utilisés pour créer un objet.

0 commentaires

1
votes

Selon la documentation sur la fonction de flèche a >,

// Mettre entre parenthèses le corps d'une fonction pour renvoyer une expression littérale d'objet:

params => ({foo: bar})

Cela signifie que si vous voulez renvoyer un objet implicitement, vous devez l'envelopper entre parenthèses.

Sans cela, le code entre accolades sera considéré comme un corps de fonction et non comme un objet (comme que vous voudriez)

Les éléments suivants sont équivalents:

params => { return {foo: bar}} // Explicitly return an object (from function body)
params => ({foo: bar}) // Implicitly return an object by wrapping it with parentheses

0 commentaires