Spread Syntax vs Rest Parameter : Comprendre la différence

Dans ES2015, deux nouvelles fonctionnalités, la syntaxe de spread et les paramètres de repos, offrent des moyens puissants de manipuler des tableaux et des objets. Bien que les deux puissent sembler similaires, ils servent des objectifs distincts et chacun a sa propre fonctionnalité unique.

Syntaxe de propagation

Syntaxe de propagation (représentée par trois points "..." ) vous permet de répartir ou d'étendre un itérable (tel qu'un tableau ou un objet) en éléments individuels au sein d'un autre itérable. Cette fonctionnalité vous permet de fusionner ou de combiner facilement plusieurs tableaux ou objets en un nouveau.

Par exemple, considérons le code suivant :

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha); // alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

Dans cet extrait, les ...abc et ... La syntaxe def spread développe les tableaux abc et def en éléments individuels, créant ainsi un nouveau tableau alpha contenant tous les éléments des deux tableaux.

Paramètre de repos

D'un autre côté , un paramètre rest (indiqué par trois points "...", précédés d'un identifiant) collecte tous les arguments restants transmis à une fonction dans un seul tableau. Le paramètre rest doit être le dernier paramètre de la liste des paramètres de la fonction.

Un exemple de paramètre rest en action est le suivant :

function sumAll(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total  = num;
  }
  return total;
}

let result = sumAll(1, 2, 3, 4, 5);
console.log(result); // result == 15

Dans ce code, le paramètre ...numbers rest collecte les arguments restants passés à la fonction sumAll (dans ce cas, 1, 2, 3, 4 et 5) et crée un seul tableau de nombres.