Rest et spread en

À propos de Rest et spread

JavaScript dispose d'un opérateur ... intégré qui facilite le travail avec un nombre indéfini d'éléments. Selon le contexte, on l'appelle soit un opérateur rest, soit un opérateur spread.

L'opérateur rest

Éléments du reste

Lorsque ... apparaît du côté gauche d'une affectation, ces trois points sont appelés l'opérateur rest. Les trois points accompagnés d'un nom de variable forment un élément du reste. Il collecte zéro ou plusieurs valeurs et les stocke dans un seul tableau.

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

Note qu'en JavaScript, contrairement à certains autres langages, un élément rest ne peut pas avoir de virgule finale. Il doit être le dernier élément d'une affectation par déstructuration. L'exemple ci-dessous lève une SyntaxError :

const [...items, last] = [2, 4, 8, 16]

Propriétés du reste

Comme pour les tableaux, l'opérateur rest peut aussi servir à collecter une ou plusieurs propriétés d'un objet et à les stocker dans un seul objet.

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

Paramètres du reste

Lorsque ... apparaît dans la définition d'une fonction à côté de son dernier paramètre, ce paramètre est appelé un paramètre du reste. Il permet à la fonction d'accepter un nombre indéfini d'arguments sous forme de tableau.

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

Décomposition

Éléments de décomposition

Lorsque ... apparaît du côté droit d'une affectation, on parle de l'opérateur spread. Il étend un tableau en une liste d'éléments. Contrairement à l'élément du reste, il peut apparaître n'importe où dans une expression littérale de tableau, et il peut y en avoir plusieurs.

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

Propriétés de décomposition

Comme pour les tableaux, l'opérateur spread peut aussi servir à copier les propriétés d'un objet vers un autre.

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }