Operazioni rest e spread

9.1 Spread (operatore di espansione)

Le operazioni rest e spread in JavaScript offrono ampie possibilità per lavorare con array, oggetti e funzioni. Queste operazioni aiutano a semplificare il codice, rendendolo più espressivo e flessibile. In questa lezione esamineremo in dettaglio i concetti principali di rest e spread, nonché esempi del loro utilizzo.

L'operatore spread (...) consente di "espandere" array e oggetti in luoghi dove sono previsti zero o più elementi. Questo può essere utile quando si copiano, si uniscono array o oggetti, oppure quando si passano argomenti a funzioni.

Esempio 1: Copia di un array

In questo esempio copiedArray è una copia di originalArray.

Qui l'operatore … espande l'array come lista di variabili, e l'operatore [] impacchetta l'insieme di variabili in un nuovo array:

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

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

Esempio 2: Unione di array

In questo esempio due array array1 e array2 vengono uniti in un unico array combinedArray.

Qui l'operatore … espande entrambi gli array come lista di variabili, e l'operatore [] impacchetta l'insieme di variabili in un nuovo array:

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

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

Esempio 3: Passaggio di argomenti a una funzione

In questo esempio l'array numbers viene espanso in tre argomenti per la funzione sum():

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

      const numbers = [1, 2, 3];

      console.log(sum(...numbers)); // Stamperà: 6
    
  

Esempio 4: Copia di un oggetto

In questo esempio copiedObject è una copia di originalObject:

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

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

Esempio 5: Unione di oggetti

In questo esempio due oggetti obj1 e obj2 vengono uniti in un unico oggetto combinedObject:

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

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

9.2 Rest (operatore di rest)

L'operatore rest (...) permette di raccogliere diversi elementi in un array. Questo è particolarmente utile quando si lavora con funzioni che accettano un numero variabile di argomenti, nonché durante la destrutturazione di array e oggetti.

Esempio 1: Parametri rest nelle funzioni

In questo esempio la funzione sum() accetta un numero qualsiasi di argomenti e li somma:

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

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

Esempio 2: Destrutturazione di array con rest

In questo esempio i primi due elementi dell'array vengono assegnati alle variabili first e second, mentre gli altri elementi vengono raccolti in un array rest:

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

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

Esempio 3: Destrutturazione di oggetti con rest

In questo esempio le proprietà a e b vengono estratte in variabili separate, mentre le altre proprietà vengono raccolte in un oggetto rest:

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

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

9.3 Applicazione di rest e spread in compiti reali

Esempio 1: Unione di array con condizione

In questo esempio le impostazioni dell'utente userSettings sovrascrivono i valori predefiniti defaultSettings:

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

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

Esempio 2: Suddivisione di un array

In questo esempio l'array numbers viene suddiviso in due parti dopo l'estrazione dei primi due elementi:

    
      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); // Stamperà: [3, 4, 5, 6]
      console.log(secondHalf); // Stamperà: [7, 8, 9, 10]