À quoi servent les opérateurs spread et rest en JavaScript?

L'opérateur spread (...) est utilisé pour "étendre" des objets itérables (comme des tableaux ou des chaînes) à des endroits où l'on attend zéro ou plusieurs arguments (lors de l'appel de fonctions) ou éléments (lors de la création de tableaux). Il est également utilisé pour combiner les propriétés d'objets en un nouvel objet.

// Utilisation de spread dans l'appel d'une fonction
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// Utilisation de spread pour fusionner des tableaux
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]

// Utilisation de spread pour fusionner des objets
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

L'opérateur rest (...) est utilisé dans la syntaxe des paramètres de fonction pour rassembler tous les arguments restants dans un tableau. Cela permet à la fonction de recevoir un nombre indéfini d'arguments. Il est également utilisé lors de la déstructuration d'un tableau ou d'un objet pour rassembler les éléments ou propriétés restants.

// Utilisation de rest dans les paramètres de fonction
function sum(...args) {
  // args est maintenant un tableau [1, 2, 3]
  return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6

// Utilisation de rest lors de la déstructuration d'un tableau
const [first, second, ...restOfArray] = [1, 2, 3, 4, 5];
// first = 1, second = 2, restOfArray = [3, 4, 5]

// Utilisation de rest lors de la déstructuration d'un objet
const { a, b, ...restOfObject } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, restOfObject = { c: 3, d: 4 }

Différence principale:

• Spread "étend" les éléments ou propriétés.
• Rest "rassemble" les éléments ou propriétés dans un tableau/objet.