Spread Operator

Le spread operator permet de copier, fusionner ou séparer des données facilement.

Il utilise la syntaxe :

...

Le spread operator est très utilisé dans le JavaScript moderne.

1. Copier un tableau

Le spread operator peut copier un tableau.

const fruits = ["apple", "banana"];

const copy = [...fruits];

console.log(copy);

2. Sans spread operator

Sans spread, deux variables peuvent pointer vers le même tableau.

const fruits = ["apple", "banana"];

const copy = fruits;

copy.push("orange");

console.log(fruits);

Ici, le tableau original est modifié.

3. Éviter la mutation

Le spread operator aide à éviter la mutation des données.

const fruits = ["apple", "banana"];

const newFruits = [...fruits, "orange"];

console.log(fruits);

console.log(newFruits);

Le tableau original reste intact.

4. Fusionner des tableaux

Plusieurs tableaux peuvent être fusionnés.

const fruits = ["apple", "banana"];

const vegetables = ["carrot", "potato"];

const foods = [...fruits, ...vegetables];

console.log(foods);

5. Ajouter des éléments

Le spread operator peut ajouter des valeurs facilement.

const numbers = [2, 3];

const result = [1, ...numbers, 4];

console.log(result);

6. Spread avec les objets

Le spread operator fonctionne aussi avec les objets.

const user = {

    name: "Fred",
    age: 22

};

const copy = {

    ...user

};

console.log(copy);

7. Fusionner des objets

const user = {

    name: "Fred"

};

const details = {

    age: 22

};

const profile = {

    ...user,
    ...details

};

console.log(profile);

Ici, les propriétés des deux objets sont fusionnées.

8. Remplacer une propriété

Une propriété peut être remplacée facilement.

const user = {

    name: "Fred",
    age: 22

};

const updatedUser = {

    ...user,
    age: 33

};

console.log(updatedUser);

9. Spread dans une fonction

Le spread operator peut transmettre plusieurs valeurs à une fonction.

function add(a, b, c) {

    return a + b + c;

}

const numbers = [1, 2, 3];

console.log(add(...numbers));

10. Spread vs rest operator

Le spread operator et le rest operator utilisent la même syntaxe :

...

Cependant, leur rôle est différent.

11. Exemple de rest operator

function total(...numbers) {

    console.log(numbers);

}

total(1, 2, 3);

Ici, toutes les valeurs sont regroupées dans un tableau.

12. Spread et destructuring

Le spread operator est souvent utilisé avec le destructuring.

const numbers = [1, 2, 3];

const [first, ...rest] = numbers;

console.log(first);

console.log(rest);

13. Pourquoi utiliser le spread operator

• Copier des données facilement
• Éviter la mutation
• Fusionner des structures
• Créer du code plus lisible
• Simplifier la manipulation des tableaux et objets

14. Erreur fréquente

Le spread operator crée une copie superficielle.

const user = {

    name: "Fred",

    address: {

        city: "Montreal"

    }

};

const copy = {

    ...user

};

Les objets imbriqués restent partagés.

15. Bonnes pratiques

• Utiliser spread pour éviter la mutation
• Utiliser spread pour fusionner des données
• Utiliser spread avec le destructuring
• Éviter les copies profondes involontaires
• Privilégier le spread au code répétitif

Résumé rapide