Spread e Rest operators em JavaScript

Fala galera, tranquilo? Hoje vim falar sobre os operadores Spread e Rest de JavaScript, que chegaram na versão ES6. O intuito vai ser mostrar na prática, e no final, depois de olhar os exemplos, explicarei melhor conceitualmente cada um dos dois. Vamos lá!

Spread

Vamos começar com diferentes exemplos de uso do spread.

Spread em chamadas de função

Aqui nós temos um array de números e uma string. Percebam que para chamar a função Math.max que recebe um conjunto de números como parâmetro, não irá adiantar passar um array como parâmetro pois retornará NaN (not a number). Com spread resolvemos esse problema, já que ele espalhará os elementos do array em parâmetros para a função.

Reparem como ficará o print que é feito através da função log de uma string. Utilizando o spread, fica possível entender melhor como os elemento ficam espalhados.

// Spread em chamadas de funções
const numeros = [1, 32, 45, 2, 765, 311, 89]
const string = "Olá alunos da Cod3r"

// Exemplo 1
console.log(Math.max(1, 32, 45, 2, 765, 311, 89)) // Printa: 765
console.log(Math.max(numeros)) // Printa: NaN
console.log(Math.max(...numeros)) // Printa: retornar 765

//Exemplo 2
console.log(...string) 
// Printa: O l á   a l u n o s   d a   C o d 3 r

Spread em Arrays Literais

Empregando o spread, é possível unir dois arrays em outro array de forma bem simples, como mostrado no exemplo. O novo array campeoes receberá todos os elementos do array suporte e do array jungle, e quantos mais elementos eu quiser passar.

O mesmo funciona para strings; com o spread, eu posso criar um array cujo os elementos serão cada caractere da string incluindo os espaços.

// Spread com Array Literais
const suportes = ["Blitz", "Leona", "Lux", "Seraphine"]
const jungle = ["Olaf", "Sejuani", "Vi", "Kha zix"]
const string = "Olá Mundo"

// Exemplo 1
const campeoes = [...suportes, ...jungle, "Darius"]
console.log(campeoes)  
// Printa: ["Blitz", "Leona", "Lux", "Seraphine", "Olaf", "Sejuani", "Vi", 
//"Kha zix", "Darius"]

// Exemplo 2
const letras = [...string]
console.log(letras)
// Printa: ["O", "l", "á", " ", "M", "u", "n", "d", "o"]

Spread em Objetos Literais

Também podemos utilizar o spread em objetos. No exemplo 1, crio um novo objeto chamado gato2 e, além dos atributos de gato, eu também adiciono o atributo pelagem.

No exemplo 2, eu crio um array de objetos chamado pets, e passo os objetos de forma bem simples com o spread .

// Spread em Objetos Literais
const gato = { patas: 4, faz: 'miau' }
const cachorro = { patas: 4, faz: 'auau' }

// Exemplo 1 - Adicionar atributos
const gato2 = {...gato, pelagem: 'branca'}
console.log(gato2)
// Printa: { patas: 4, faz: 'miau', pelagem: 'branca' }

// Exemplo 2 - Juntar 2 ou mais objetos em um array de objetos
const pets = [{...gato2}, {...cachorro}]
console.log(pets)
// Printa [ { patas: 4, faz: 'miau', pelagem: 'branca' },  { patas: 4, faz: 'auau' } ]

Rest

Bora ver o rest na prática.

Jeito antigo de receber um número indefinido de parâmetros

O objeto arguments em uma função irá armazenar todos os parâmetros que você passar, portanto podemos fazer algo como:

// Utilizando arguments
function soma() {
    let total = 0;
    for(let i = 0; i < arguments.length; i++) {
        total += arguments[i]
    }
    return total
}
console.log(soma(2, 4, 6, 8, 10))
// Printa: 30

Apesar de ser possível iterar o arguments, ele não possui métodos como reduce, map etc; isso limita seu uso.

Utilizando o rest para a mesma tarefa

Agora ao invés de deixar o campo dos parâmetros vazio, eu passo …nums, que também receberá um número dinâmico de elementos, porém nums será um array. Isso significa que podemos utilizar reduce por exemplo para executar a tarefa de cima:

// Rest operator
function soma(...nums) {
    return nums.reduce((total, el) => total + el)
}
console.log(soma(2, 4, 6, 8, 10))
// Printa: 30

Conclusão

Vimos que o uso desses 3 pontinhos facilita (e muito) nossa vida na hora de manipular conjuntos de dados, mas provavelmente você está se perguntando qual é a diferença do spread pro rest, já que ambos são idênticos, né?! Mas não são!

Você irá utilizar o spread para espalhar dados de um conjunto de dados (array, objeto, string) para outro, fazendo modificações se necessário. O rest você utiliza quando se espera receber vários elementos e deseja transformá-los em um array, como no caso do parâmetro da função do exemplo de rest.

Spread: “Olá” → “O”, “l”, “á”

Rest: “O”, “l”, “á” → [“O”, “l”, “á”]

Espero que tenha ficado claro. Pode parecer um pouco confuso, mas depois de praticar no seu PC, tenho certeza que você entenderá melhor!