Histoire de collation :
Disons que vous avez un panier de collations :

const snacks = ['apple', 'banana', 'chocolate'];

Maintenant, vous souhaitez partager ces collations avec vos amis. Mais au lieu de leur donner tout le panier, vous sortez chaque collation et leur donnez une à une :

console.log(...snacks);  // Output: apple banana chocolate

L'opérateur ... (à tartiner), c'est comme sortir les collations du panier et les étaler sur la table. Vos amis peuvent désormais les récupérer individuellement !

D'un autre côté, si vos amis apportent encore plus de collations, vous pouvez les rassembler toutes dans un grand panier en utilisant l'opérateur ... (rest) :

function collectSnacks(...moreSnacks) {
  console.log(moreSnacks);
}

collectSnacks('cookie', 'chips', 'juice');  // Output: ['cookie', 'chips', 'juice']

Ici, l'opérateur ... rassemble toutes les collations dans un nouveau panier. C'est ainsi que fonctionne l'opérateur de repos !

Si vous débutez avec JavaScript, vous avez peut-être rencontré deux éléments de syntaxe spéciaux : les opérateurs spread et rest. Ils se ressemblent tous les deux – trois points (...) – mais ils sont utilisés de différentes manières. Décomposons-les avec des exemples simples !

1. Qu'est-ce que l'opérateur de spread ?
L'opérateur de propagation (...) est utilisé pour développer un tableau ou un objet en éléments individuels. C'est comme décompresser un tableau ou un objet en ses composants.

Exemple : Extension d'un tableau
Disons que vous disposez d'un tableau de nombres et que vous souhaitez les transmettre individuellement dans une fonction.

const numbers = [1, 2, 3];
console.log(...numbers);  // Output: 1 2 3

Vous pouvez utiliser l'opérateur de répartition pour répartir les éléments du tableau !

Exemple : combinaison de tableaux
Si vous avez deux tableaux et que vous souhaitez les fusionner, l'opérateur spread facilite la tâche :

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];
console.log(mergedArray);  // Output: [1, 2, 3, 4, 5, 6]

C'est comme disposer tous les éléments du tableau1 et du tableau2 dans un nouveau tableau.

Exemple : Copier un objet
Vous pouvez également utiliser l'opérateur spread avec des objets :

const user = { name: "Ahmed", age: 25 };
const updatedUser = { ...user, location: "Bengaluru" };

console.log(updatedUser);
// Output: { name: "Ahmed", age: 25, location: "Bengaluru" }

Ici, nous avons copié les propriétés de l'objet utilisateur et ajouté un nouvel emplacement de propriété.

1. Qu'est-ce que l'opérateur de repos ? L’opérateur rest est l’opposé de l’opérateur spread. Au lieu de développer un tableau ou un objet, il collecte plusieurs éléments dans un tableau ou un objet.

Exemple : Fonction avec paramètres de repos
Imaginez que vous écrivez une fonction qui prend un certain nombre d'arguments :

function addNumbers(...nums) {
  return nums.reduce((sum, current) => sum   current, 0);
}

console.log(addNumbers(1, 2, 3, 4));  // Output: 10

Dans ce cas, l'opérateur rest ...nums rassemble tous les arguments dans un tableau, ce qui facilite le travail avec plusieurs valeurs.

Exemple : Déstructuration avec Rest
Vous pouvez également utiliser l'opérateur rest lors de la déstructuration de tableaux :

const [first, ...rest] = [1, 2, 3, 4];
console.log(first);  // Output: 1
console.log(rest);   // Output: [2, 3, 4]

Ici, first récupère le premier élément du tableau et rest collecte les éléments restants dans un nouveau tableau.

Conclusion
Les opérateurs spread et rest sont des outils puissants et polyvalents en JavaScript. Pour récapituler :

• Spread (...) développe un tableau ou un objet en éléments individuels.
• Rest (...) collecte plusieurs éléments dans un tableau ou un objet.

J'espère que vous avez compris ces 2 concepts répartis et reposés, cela rendra votre code JavaScript plus concis et plus facile à lire !

Bon codage :)