Opérations rest et spread

9.1 Spread (opérateur de décomposition)

Les opérations rest et spread en JavaScript offrent de nombreuses possibilités pour travailler avec des arrays, des objets et des fonctions. Ces opérations aident à simplifier le code, le rendant plus expressif et flexible. Dans cette conférence, nous allons examiner en détail les concepts fondamentaux de rest et spread, ainsi que leurs exemples d'utilisation.

L'opérateur spread (...) permet de «décomposer» les arrays et les objets dans des endroits où zéro ou plusieurs éléments sont attendus. Cela peut être utile lors de la copie, de la fusion d'arrays ou d'objets, ainsi que lors du passage d'arguments à des fonctions.

Exemple 1 : Copie d'un array

Dans cet exemple, copiedArray est une copie de originalArray.

Ici, l'opérateur … décompose l'array sous forme de liste de variables, et l'opérateur [] emballe l'ensemble de variables dans un nouvel array :

    
      const originalArray = [1, 2, 3];
      const copiedArray = [...originalArray];

      console.log(copiedArray); // Affichera: [1, 2, 3]
    
  

Exemple 2 : Fusion d'arrays

Dans cet exemple, deux arrays array1 et array2 sont fusionnés en un seul array combinedArray.

Ici, l'opérateur … décompose les deux arrays sous forme de liste de variables, et l'opérateur [] emballe l'ensemble de variables dans un nouvel array :

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

      console.log(combinedArray); // Affichera: [1, 2, 3, 4, 5, 6]
    
  

Exemple 3 : Passage d'arguments à une fonction

Dans cet exemple, l'array numbers est décomposé en trois arguments pour la fonction sum() :

    
      function sum(a, b, c) {
        return a + b + c;
      }

      const numbers = [1, 2, 3];

      console.log(sum(...numbers)); // Affichera: 6
    
  

Exemple 4 : Copie d'un objet

Dans cet exemple, copiedObject est une copie de originalObject :

    
      const originalObject = { a: 1, b: 2 };
      const copiedObject = { ...originalObject };

      console.log(copiedObject); // Affichera: { a: 1, b: 2 }
    
  

Exemple 5 : Fusion d'objets

Dans cet exemple, deux objets obj1 et obj2 sont fusionnés en un seul objet combinedObject :

    
      const obj1 = { a: 1, b: 2 };
      const obj2 = { c: 3, d: 4 };
      const combinedObject = { ...obj1, ...obj2 };

      console.log(combinedObject); // Affichera: { a: 1, b: 2, c: 3, d: 4 }
    
  

9.2 Rest (opérateur de paramètres restants)

L'opérateur rest (...) permet de collecter plusieurs éléments dans un array. Cela est particulièrement utile lors du travail avec des fonctions qui acceptent un nombre variable d'arguments, ainsi que lors de la déstructuration d'arrays et d'objets.

Exemple 1 : Paramètres restants dans les fonctions

Dans cet exemple, la fonction sum() accepte n'importe quel nombre d'arguments et les additionne :

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

      console.log(sum(1, 2, 3)); // Affichera: 6
      console.log(sum(4, 5, 6, 7)); // Affichera: 22
    
  

Exemple 2 : Déstructuration d'array avec rest

Dans cet exemple, les deux premiers éléments de l'array sont assignés à des variables first et second, et les autres éléments sont collectés dans un array rest :

    
      const [first, second, ...rest] = [1, 2, 3, 4, 5];

      console.log(first);  // Affichera: 1
      console.log(second); // Affichera: 2
      console.log(rest);   // Affichera: [3, 4, 5]
    
  

Exemple 3 : Déstructuration d'objets avec rest

Dans cet exemple, les propriétés a et b sont extraites dans des variables distinctes, et les autres propriétés sont collectées dans un objet rest :

    
      const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };

      console.log(a);  // Affichera: 1
      console.log(b);  // Affichera: 2
      console.log(rest); // Affichera: { c: 3, d: 4 }
    
  

9.3 Application de rest et spread à des tâches réelles

Exemple 1 : Fusion d'arrays avec une condition

Dans cet exemple, les paramètres utilisateur userSettings remplacent les valeurs par défaut defaultSettings :

    
      const defaultSettings = { theme: 'dark', showNotifications: true };
      const userSettings = { showNotifications: false, fontSize: 14 };
      const settings = { ...defaultSettings, ...userSettings };

      console.log(settings); // Affichera: { theme: 'dark', showNotifications: false, fontSize: 14 }
    
  

Exemple 2 : Division d'un array en parties

Dans cet exemple, l'array numbers est divisé en deux parties après l'extraction des deux premiers éléments :

    
      const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const [first, second, ...rest] = numbers;
      const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
      const secondHalf = rest.slice(Math.floor(rest.length / 2));

      console.log(firstHalf); // Affichera: [3, 4, 5, 6]
      console.log(secondHalf); // Affichera: [7, 8, 9, 10]