2.9 L'opérateur spread et Rest
Après les classes et les fonctions fléchées, nous découvrons un nouvel opérateur très utile en JavaScript moderne : l'opérateur trois points (...). En réalité, c'est un seul opérateur dont le nom varie selon le contexte d'usage : on parle de spread (étalement) ou de rest (regroupement) selon l'endroit où il est placé.
Deux usages, un même opérateur
- Spread : étale les éléments d'un tableau ou d'un objet.
- Rest : regroupe plusieurs arguments en un tableau.
- Très pratique pour copier sans muter (programmation immutable).
- Utilisé constamment en React pour les props et les states.
L'opérateur spread sert à créer un nouveau tableau ou objet à partir d'un existant en y ajoutant des éléments. Dans le cas des objets, si une propriété est définie deux fois, la dernière écrase la première. L'opérateur rest, lui, est utilisé dans une liste d'arguments de fonction : il regroupe tous les arguments restants dans un tableau, ce qui permet de gérer un nombre variable d'arguments.
// SPREAD sur un tableau
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4]; // [1, 2, 3, 4]
// SPREAD sur un objet
const person = { name: "Mathieu" };
const newPerson = { ...person, age: 21 };
// REST dans une fonction
const filter = (...args) => args.filter(el => el === 1);
console.log(filter(1, 2, 3)); // [1]Vous reconnaîtrez très vite ces trois points dans votre code React. Ils servent par exemple à copier l'état actuel d'un composant pour le modifier sans muter l'original, ou à transmettre l'ensemble des props à un composant enfant. C'est un outil simple mais incroyablement puissant, alors prenez le temps de bien le maîtriser.
En résumé
L'opérateur spread et rest utilise la même syntaxe (trois points) mais sert des objectifs différents. Le spread étend les éléments d'un tableau ou les propriétés d'un objet dans une nouvelle structure, tandis que le rest fusionne plusieurs arguments de fonction dans un tableau. Cette leçon couvre des exemples pratiques avec des tableaux, des objets et des fonctions de flèche JavaScript/ES6.
Points clés
- L'opérateur spread et rest utilisent la même syntaxe (trois points …) mais avec des rôles distincts selon le contexte d'utilisation
- Le spread étend les éléments d'un tableau ou les propriétés d'un objet dans une nouvelle structure (ex: [...oldArray, 4])
- Le rest fusionne plusieurs arguments de fonction dans un tableau pour traitement collectif avec les méthodes de tableau
- Avec le spread sur les objets, les nouvelles propriétés définies après écrasent les valeurs existantes
- Le rest paramètre dans une fonction permet de capturer un nombre illimité d'arguments sans les nommer individuellement
Questions fréquentes
Quand utilise-t-on l'opérateur spread vs rest ?
Le spread étend les éléments d'un tableau ou les propriétés d'un objet dans une nouvelle structure. Le rest fusionne plusieurs arguments de fonction dans un tableau pour les manipuler collectivement.
Peut-on utiliser l'opérateur spread sur les objets ?
Oui, on peut créer un nouvel objet avec les propriétés d'un ancien objet en utilisant {...objet}. Les nouvelles propriétés ajoutées après écrasent les valeurs existantes.
Comment le rest paramètre fonctionne-t-il dans une fonction ?
Le rest paramètre (…nom) capture tous les arguments passés à la fonction dans un tableau, permettant de les traiter avec des méthodes de tableau comme filter().