JavaScript Rest et Spread Syntax

En JavaScript, le token à trois points ... remplit deux rôles opposés selon l'endroit où vous l'écrivez. En tant que paramètre de fonction, il collecte plusieurs arguments dans un seul array — c'est un paramètre rest. Partout ailleurs, il étend un itérable ou un object en ses éléments individuels — c'est la syntaxe spread. Même symbole, signification en miroir.

Les deux ont été introduits dans ES6 (2015). Cette page couvre les paramètres rest (y compris la règle selon laquelle ils doivent apparaître en dernier), le spread dans les appels de fonction, les littéraux d'array et les littéraux d'object, comment copier et fusionner avec le spread, en quoi le rest diffère du spread, et pourquoi les deux surpassent l'ancien object arguments.

Comprendre les paramètres rest en JavaScript

Un paramètre rest permet à une fonction d'accepter un nombre indéfini d'arguments et de les recevoir sous forme d'un véritable array. On écrit ... suivi d'un nom ; ce nom devient un array contenant chaque argument qui n'a pas été mis en correspondance avec un paramètre précédent.

Syntaxe et utilisation

Dans l'exemple ci-dessous, numbers est un array ordinaire, vous pouvez donc appeler des méthodes d'array comme reduce directement dessus — aucune conversion nécessaire.

Le paramètre rest doit être le dernier

Une fonction ne peut avoir qu'un seul paramètre rest, et il doit être le dernier de la liste des paramètres. Les paramètres nommés avant lui sont remplis en premier ; le paramètre rest récupère ensuite tout ce qui reste. Le placer ailleurs provoque une SyntaxError.

Avantages par rapport à l'object arguments

Avant ES6, la seule façon de lire tous les arguments était l'object spécial arguments disponible dans les fonctions non fléchées. Les paramètres rest sont meilleurs à presque tous égards :

• Un vrai array. arguments ressemble à un array (il a une propriété length et des index) mais ne possède pas map, filter, reduce, etc. Un paramètre rest est un véritable array.
• Explicite et lisible. La signature function sum(...numbers) indique au lecteur que la fonction accepte une liste variable. arguments est invisible dans la signature.
• Vous pouvez ne capturer que les extras. Combinez des paramètres fixes avec un paramètre rest, comme montré ci-dessus — arguments contient toujours chaque argument, y compris ceux que vous avez déjà nommés.
• Fonctionne avec les fonctions fléchées. Les fonctions fléchées n'ont pas leur propre object arguments, donc un paramètre rest est le seul moyen de rassembler des arguments variables dans une fonction fléchée.

Plonger dans la syntaxe spread

La syntaxe spread étend un itérable — un array, une string, un Set, un Map, ou tout itérable — en ses éléments individuels là où une liste de valeurs est attendue. Les trois contextes dans lesquels vous l'utiliserez sont les appels de fonction, les littéraux d'array et les littéraux d'object.

Spread dans les littéraux d'array

À l'intérieur de [ ], le spread insère chaque élément d'un itérable dans le nouvel array. C'est la façon la plus propre d'insérer un array dans un autre à n'importe quelle position :

Les strings étant itérables, en étendre une produit un array de ses caractères :

Spread dans les appels de fonction

Dans un appel de fonction, le spread transforme un array en une liste d'arguments séparés. Cela remplace l'ancien motif func.apply(null, array) :

Spread dans les littéraux d'object

À l'intérieur de { }, le spread copie les propriétés propres énumérables d'un object dans un nouvel object. Lorsque des clés entrent en collision, la valeur ultérieure l'emporte — ce qui rend le spread parfait pour appliquer des surcharges ou des valeurs par défaut :

Copier et fusionner

Le spread est la façon idiomatique de faire une copie superficielle ou de fusionner des collections sans muter les originaux :

Le spread est superficiel. Il copie uniquement les valeurs de premier niveau. Les objects et arrays imbriqués sont toujours partagés par référence, donc muter une valeur imbriquée affecte les deux copies :

Rest vs Spread : les distinguer

Le token ... est identique dans les deux rôles, utilisez donc la position pour décider lequel vous lisez :

Un test simple : si ...x reçoit des valeurs, c'est du rest ; s'il produit des valeurs, c'est du spread.

Combiner paramètres rest et syntaxe spread

Les deux sont des images miroir, ils s'associent donc naturellement — le rest collecte les arguments dans un array à l'entrée, et le spread étend un array en arguments à la sortie :

Un motif courant en pratique est un wrapper qui transmet chaque argument à une autre fonction :

Déstructuration avec le motif rest

Dans une affectation par déstructuration, le motif rest capture les propriétés ou éléments que vous n'avez pas nommés explicitement. Dans les objects, il produit un object des clés restantes ; dans les arrays, un array des éléments restants.

Conclusion

Le token ... est l'une des additions les plus utiles qu'ES6 ait apportées à JavaScript. En tant que paramètre rest, il rassemble un nombre variable d'arguments dans un array propre (et remplace l'encombrant object arguments) ; en tant que syntaxe spread, il étend les itérables dans les appels de fonction, les littéraux d'array et les littéraux d'object, vous offrant des copies superficielles et des fusions concises. Retenez les deux règles qui piègent le plus souvent : un paramètre rest doit être le dernier paramètre, et les copies spread sont superficielles.

Sujets associés

• Affectation par déstructuration — extraire des valeurs de arrays et d'objects, souvent associé au motif rest.
• JavaScript Array — la structure de données que les paramètres rest vous remettent et que le spread étend.
• Fonctions fléchées revisitées — pourquoi les fonctions fléchées s'appuient sur les paramètres rest plutôt que sur arguments.
• Liaison de fonction — contrôler this, fréquemment combiné avec le spread lors du transfert d'arguments.

Pratique