6.8 L'Opérateur de diffusion

Dans la vidéo précédente, vous avez vu comment combiner deux tableaux avec concat. Il existe une alternative ES6 plus claire et plus flexible : l'opérateur de diffusion ... (spread operator).

Combiner deux tableaux

Avec spread, on déclare un nouveau tableau et on « répand » à l'intérieur les éléments individuels de chaque tableau source.

const first = [1, 2, 3];
							const second = [4, 5, 6];
							const combined = [...first, ...second];
							// [1, 2, 3, 4, 5, 6]

L'avantage par rapport à concat est la visualisation : on voit clairement qu'on construit un nouveau tableau et on contrôle l'ordre précis des éléments. On peut aussi insérer facilement des éléments entre ou aux extrémités.

const combined = [0, ...first, 'middle', ...second, 7];

Faire l'équivalent avec concat et des manipulations d'index serait beaucoup plus pénible.

Cloner un tableau avec spread

L'opérateur de diffusion fonctionne aussi pour cloner. Le pattern est le même que pour les objets, vu dans la section précédente :

const copy = [...combined];

C'est strictement équivalent à combined.slice() sans argument, mais plus explicite sur l'intention. Comme pour les objets, c'est une copie de surface : les éventuels sous-tableaux ou objets imbriqués restent partagés par référence.

L'opérateur spread est devenu omniprésent en JavaScript moderne. Vous le retrouverez dans la déstructuration, les paramètres rest, la propagation d'arguments, etc. Maîtrisez-le bien, c'est un gain de clarté énorme dans votre code au quotidien.