rest and spread operator difference.md

Rest and Spread Operators in JavaScript

Les opérateurs rest et spread en JavaScript peuvent être confondus car ils utilisent tous deux les trois points (...), mais ils ont des fonctions différentes en fonction du contexte dans lequel ils sont utilisés.

1. Rest Operator (...) :

L'opérateur rest est utilisé pour collecter plusieurs arguments dans une fonction ou pour regrouper les éléments d'un tableau ou les propriétés d'un objet en un seul.

Usage dans une fonction :

Il permet de regrouper tous les arguments supplémentaires passés à une fonction dans un tableau.

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // 6

Dans cet exemple, tous les arguments passés à sum sont collectés dans le tableau numbers grâce à l'opérateur rest.

Usage avec les objets :

Il permet de capturer les propriétés restantes d'un objet après en avoir extrait certaines.

const person = { name: 'Alice', age: 25, city: 'Paris' };
const { name, ...rest } = person;

console.log(name); // 'Alice'
console.log(rest); // { age: 25, city: 'Paris' }

Ici, name est extrait de l'objet person, et le reste des propriétés (âge et ville) est regroupé dans l'objet rest.

2. Spread Operator (...) :

L'opérateur spread est utilisé pour "étaler" ou "décomposer" les éléments d'un tableau ou les propriétés d'un objet dans un autre tableau ou objet.

Usage avec les tableaux :

Il permet de décomposer un tableau en plusieurs éléments distincts.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // [1, 2, 3, 4, 5]

Dans cet exemple, le tableau arr1 est décomposé, et ses éléments sont ajoutés individuellement à arr2.

Usage avec les objets :

Il permet de copier ou de fusionner des objets.

const person1 = { name: 'Alice', age: 25 };
const person2 = { ...person1, city: 'Paris' };

console.log(person2); // { name: 'Alice', age: 25, city: 'Paris' }

Ici, les propriétés de person1 sont décomposées et copiées dans person2, avec l'ajout de la propriété city.

En résumé :

• Rest : regroupe plusieurs éléments en un seul (argument dans une fonction, propriétés d'un objet, etc.).
• Spread : décompose un élément en plusieurs (éléments d'un tableau ou propriétés d'un objet).

Le contexte (fonction ou structure de données) détermine si vous utilisez ... comme opérateur rest ou spread.

---

Exemples supplémentaires pour clarifier le contexte d'utilisation

1. Rest Operator :

Exemple dans une fonction (opérateur rest) :

Quand vous utilisez ... dans la définition des paramètres d'une fonction, c'est l'opérateur rest.

function sum(...numbers) {
  // Ici, ...numbers regroupe tous les arguments dans un tableau appelé numbers
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

sum(1, 2, 3); // [1, 2, 3] est regroupé dans numbers

Exemple dans la destructuration d'un objet (opérateur rest) :

Quand vous utilisez ... dans la destructuration d'un objet, il regroupe les propriétés restantes de l'objet.

const person = { names: 'Alice', age: 25, city: 'Paris' };
const { names, ...rest } = person;

console.log(rest); // { age: 25, city: 'Paris' }

Ici, ...rest regroupe toutes les autres propriétés restantes dans un objet rest.

2. Spread Operator :

Exemple avec un tableau (opérateur spread) :

Quand vous utilisez ... dans le contexte où vous étalez les éléments d'un tableau ou d'un objet, c'est l'opérateur spread.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; 
// Ici, ...arr1 étale les éléments de arr1 dans arr2

console.log(arr2); // [1, 2, 3, 4, 5]

Exemple avec un objet (opérateur spread) :

Quand vous utilisez ... pour copier ou fusionner des objets, il étale les propriétés de l'objet source.

const person1 = { name: 'Alice', age: 25 };
const person2 = { ...person1, city: 'Paris' };

console.log(person2); // { name: 'Alice', age: 25, city: 'Paris' }

---

Conclusion :

• Rest : Utilisé dans les paramètres d'une fonction ou dans la destructuration pour regrouper plusieurs éléments.
• Spread : Utilisé dans un appel de fonction ou lors de la création/modification de tableaux ou d'objets pour décomposer/étaler les éléments.

Le contexte (si vous définissez des paramètres ou copiez des données) détermine si ... est utilisé comme opérateur rest ou spread.