Operações rest e spread

9.1 Spread (operador de desmembramento)

As operações rest e spread em JavaScript oferecem amplas possibilidades para trabalhar com arrays, objetos e funções. Essas operações ajudam a simplificar o código, tornando-o mais expressivo e flexível. Nesta aula, vamos dar uma olhada detalhada nos conceitos básicos de rest e spread, além de exemplos de uso.

O operador spread (...) permite "desmembrar" arrays e objetos em locais onde são esperados zero ou mais elementos. Isso pode ser útil ao copiar, combinar arrays ou objetos, e também ao passar argumentos para funções.

Exemplo 1: Copiando um array

Neste exemplo, copiedArray é uma cópia de originalArray.

Aqui, o operador … desmembra o array como uma lista de variáveis, e o operador [] empacota o conjunto de variáveis em um novo array:

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

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

Exemplo 2: Combinando arrays

Neste exemplo, dois arrays array1 e array2 são combinados em um único array combinedArray.

Aqui, o operador … desmembra ambos os arrays como uma lista de variáveis, e o operador [] empacota o conjunto de variáveis em um novo array:

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

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

Exemplo 3: Passando argumentos para uma função

Neste exemplo, o array numbers é desmembrado em três argumentos para a função sum():

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

      const numbers = [1, 2, 3];

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

Exemplo 4: Copiando um objeto

Neste exemplo, copiedObject é uma cópia de originalObject:

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

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

Exemplo 5: Combinando objetos

Neste exemplo, dois objetos obj1 e obj2 são combinados em um único objeto combinedObject:

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

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

9.2 Rest (operador de parâmetros remanescentes)

O operador rest (...) permite coletar vários elementos em um array. Isso é especialmente útil ao trabalhar com funções que recebem quantidade variável de argumentos, bem como ao desestruturar arrays e objetos.

Exemplo 1: Parâmetros remanescentes em funções

Neste exemplo, a função sum() aceita qualquer quantidade de argumentos e soma-os:

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

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

Exemplo 2: Desestruturação de arrays com rest

Neste exemplo, os dois primeiros elementos do array são atribuídos às variáveis first e second, e os demais elementos são coletados em um array rest:

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

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

Exemplo 3: Desestruturação de objetos com rest

Neste exemplo, as propriedades a e b são extraídas em variáveis separadas e as demais propriedades são coletadas em um objeto rest:

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

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

9.3 Aplicações de rest e spread em problemas reais

Exemplo 1: Combinando arrays com condição

Neste exemplo, configurações personalizadas userSettings sobrescrevem valores padrão defaultSettings:

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

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

Exemplo 2: Dividindo um array em partes

Neste exemplo, o array numbers é dividido em duas partes após a extração dos dois primeiros elementos:

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