História do lanche:
Digamos que você tenha uma cesta de salgadinhos:

const snacks = ['apple', 'banana', 'chocolate'];

Agora você quer compartilhar esses lanches com seus amigos. Mas em vez de dar a cesta inteira, você tira cada lanche e dá um por um:

console.log(...snacks);  // Output: apple banana chocolate

O operador ... (spread) é como tirar os salgadinhos da cesta e espalhar na mesa. Seus amigos agora podem buscá-los individualmente!

Por outro lado, se seus amigos trouxerem ainda mais lanches, você pode reunir todos em uma cesta grande usando o operador ... (rest):

function collectSnacks(...moreSnacks) {
  console.log(moreSnacks);
}

collectSnacks('cookie', 'chips', 'juice');  // Output: ['cookie', 'chips', 'juice']

Aqui, o... operador recolhe todos os salgadinhos em uma nova cesta. É assim que funciona o operador rest!

Se você é novo em JavaScript, pode ter se deparado com dois elementos de sintaxe especiais: os operadores spread e rest. Ambos parecem iguais – três pontos (...) – mas são usados ​​de maneiras diferentes. Vamos dividi-los com exemplos simples!

1. O que é o operador de spread?
O operador spread (...) é usado para expandir uma matriz ou objeto em elementos individuais. É como descompactar um array ou objeto em seus componentes.

Exemplo: Expandindo uma matriz
Digamos que você tenha um array de números e queira passá-los individualmente para uma função.

const numbers = [1, 2, 3];
console.log(...numbers);  // Output: 1 2 3

Você pode usar o operador spread para espalhar os elementos do array!

Exemplo: combinação de matrizes
Se você tem dois arrays e deseja mesclá-los, o operador spread facilita:

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

const mergedArray = [...array1, ...array2];
console.log(mergedArray);  // Output: [1, 2, 3, 4, 5, 6]

É como organizar todos os elementos do array1 e array2 em um novo array.

Exemplo: Copiando um objeto
Você também pode usar o operador spread com objetos:

const user = { name: "Ahmed", age: 25 };
const updatedUser = { ...user, location: "Bengaluru" };

console.log(updatedUser);
// Output: { name: "Ahmed", age: 25, location: "Bengaluru" }

Aqui, copiamos as propriedades do objeto de usuário e adicionamos um novo local de propriedade.

1. O que é o Operador Rest? O operador rest é o oposto do operador spread. Em vez de expandir uma matriz ou objeto, ele coleta vários elementos em uma matriz ou objeto.

Exemplo: Função com parâmetros de repouso
Imagine que você está escrevendo uma função que aceita qualquer número de argumentos:

function addNumbers(...nums) {
  return nums.reduce((sum, current) => sum   current, 0);
}

console.log(addNumbers(1, 2, 3, 4));  // Output: 10

Nesse caso, o operador rest ...nums coleta todos os argumentos em um array, facilitando o trabalho com vários valores.

Exemplo: Desestruturação com Resto
Você também pode usar o operador rest ao desestruturar arrays:

const [first, ...rest] = [1, 2, 3, 4];
console.log(first);  // Output: 1
console.log(rest);   // Output: [2, 3, 4]

Aqui, primeiro obtém o primeiro elemento do array e o restante coleta os elementos restantes em um novo array.

Conclusão
Os operadores spread e rest são ferramentas poderosas e versáteis em JavaScript. Para recapitular:

• Spread (...) expande uma matriz ou objeto em elementos individuais.
• Rest (...) coleta vários elementos em uma matriz ou objeto.

Espero que você tenha entendido esses 2 conceitos, divulgue e descanse, isso tornará seu código JavaScript mais conciso e fácil de ler!

Boa codificação :)