Trois points avant une variable, et son contenu se répand à l'endroit où on les écrit. C'est l'une des rares nouveautés du langage qui a changé la façon d'écrire du code au quotidien, en particulier dans les interfaces.
Définition
Le spread, écrit avec trois points, développe le contenu d'un élément parcourable, tableau ou chaîne, ou les propriétés d'un objet, à l'endroit exact où il apparaît. Il se lit toujours comme une ouverture : là où il y avait une boîte, il y a maintenant son contenu.
const base = [1, 2];
console.log([0, ...base, 3]); // [0, 1, 2, 3]
console.log([..."abc"]); // ["a", "b", "c"]
const defauts = { taille: "M", couleur: "noir" };
console.log({ ...defauts, couleur: "rouge" });
// { taille: "M", couleur: "rouge" }La dernière ligne montre le comportement à retenir sur les objets : à clé identique, c'est la dernière écriture qui gagne. Cet ordre est ce qui permet de fusionner des valeurs par défaut avec des valeurs fournies.
Trois usages qui reviennent tous les jours
| Usage | Écriture |
|---|---|
| Copier sans modifier l'original | const copie = [...liste] |
| Fusionner deux objets | { ...defauts, ...options } |
| Passer un tableau en arguments | Math.max(...notes) |
La première ligne est la plus importante. Beaucoup de méthodes modifient le tableau d'origine, ce qui casse tout dans une interface où l'ancienne valeur sert de point de comparaison. Copier d'abord, transformer ensuite, est devenu le réflexe de base.
const notes = [12, 18, 9];
// Trier sans abîmer le tableau d'origine
const triees = [...notes].sort((a, b) => a - b);
console.log(triees); // [9, 12, 18]
console.log(notes); // [12, 18, 9], intactLe spread supprime aussi les doublons en une ligne, associé à un Set : [...new Set(liste)]. L'ensemble refuse les répétitions, et les trois points le reconvertissent en tableau.
Sa limite : la copie reste superficielle
C'est le piège classique, et il ne se voit que sur des données imbriquées.
const source = { profil: { ville: "Lyon" } };
const copie = { ...source };
copie.profil.ville = "Paris";
console.log(source.profil.ville); // "Paris" : l'original a bougéLes trois points copient le premier niveau seulement. L'objet imbriqué n'est pas dupliqué, c'est la même adresse en mémoire qui est recopiée, donc les deux variables pointent vers lui. Pour une copie complète, utilisez structuredClone(source), disponible dans tous les environnements récents.
Questions fréquentes
Quelle différence avec le rest, qui s'écrit pareil ?
La position dans la ligne, et rien d'autre. Les mêmes trois points étalent un contenu quand ils sont utilisés à droite d'une affectation ou dans un appel, et rassemblent des valeurs quand ils apparaissent dans une déclaration de paramètres ou à gauche d'une affectation. Le sujet est détaillé dans Rest (...).
Peut-on étaler null ou undefined ?
Dans un objet, oui : { ...null } donne simplement un objet vide, sans erreur. Dans un tableau, non : [...null] lève une erreur de type, parce que le vide n'est pas parcourable. C'est une dissymétrie surprenante, et elle explique quelques plantages sur des données incomplètes.
Pourquoi le voit-on partout dans React ?
Parce que l'état d'un composant ne doit jamais être modifié sur place : il faut fournir un nouvel objet pour que l'affichage se rafraîchisse. Les trois points produisent cette copie en une expression lisible. Notre formation React revient longuement sur ce principe, qui explique la moitié des bugs d'affichage des débutants.