Através do bootcamp do qual sou aluna, aprendi sobre os operadores REST e SPREAD, ambas features do ES6.

Porém apareceu uma publicação em minha timeline do linkedin onde o autor falou um pouco do REST, e ao visualizar os comentários percebi que vários desenvolvedores pareciam ainda não conhecer essa maravilhosidade, e então resolvi escrever esse artigo para ajudarmos ainda mais desenvolvedor@s.

SPREAD

Basicamente o operador spread ... serve para que possamos copiar dados de um array ou objeto e para passarmos um array inteiro como parâmetro para uma função, porém quando a função não espera um array mas sim argumentos separados.

OMG parece genial não? Mas como utilizá-lo?

Partindo do código acima, podemos observar que temos a variável dataUser que é um array com os dados de um usuário.

Suponhamos que queremos criar uma novo array newUser que possua os mesmos dados do dataUser, mais dados adicionais, então utilizamos o spread […nameArray, dadosAdicionais].

Então, dando um console.log em nossos 2 arrays, vemos que dataUser possui 4 posições e newUser possui 6, pois ele possui tudo de dataUser mais o estado civil e a cidade como dados adicionais.

Podemos também apenas copiar os dados do array ou objeto que queremos e colocá-los em uma nova variável, nada nos impede:

Com isso, os objetos dataUser e newUser possuirão os mesmos conteúdos.

Outra forma de utilizarmos o spread é em funções, principalmente aquelas que requerem uma quantidade considerável de parâmetros.
Utilizando o exemplo abaixo, nossa função sum espera por três parâmetros, onde ela retornará a soma dos 3.

Se não tívessemos o spread, teríamos as duas opções abaixo para enviar parâmetros a nossa função, sendo a opção 2 a ‘pior’ forma digamos.

Com o spread precisaríamos apenas:

O que o spread faz no exemplo acima é “quebrar o array” onde cada posição se torna uma variável do argumento.

Podemos também combinar (um ou mais) arrays ou (um ou mais) objetos:

Perceba que no exemplo acima, utilizei o spread também no console.log, assim ele já mostra meu array fullName ‘espalhado’.

REST

O rest é utilizado quando queremos recuperar o resto de conteúdos de objetos e vetores, permitindo que nós transformemos indeterminado número de parâmetros em um novo array.

Seguindo a linha do spread, o rest possui a mesma forma declarativa para utilização, …nomeArray ou …nomeObjeto, porém o rest é utilizado sempre no final e a forma de nomear as variáveis também é diferente, pois o rest utiliza o modelo de desestruturação.

Vamos aos exemplos:

Conforme acima, o array numbers possui números, porém se quisermos utilizar alguns números em variáveis separadas, basta criarmos um novo array passando o nome que essas variáveis passarão a ter e o restante dos dados que não quisermos em variáveis separadas, podemos transformá-los em outro array.
Nesse caso, o restNumbers é um array derivado de numbers que possui o restante dos números que não separamos.

Os nomes que daremos as nossas variáveis devem seguir a ordem da posição dos itens do array, nesse caso, name equivale a posição[0] de person, assim como yearBirth equivale a posição[1] e assim sucessivamente.

O rest também funciona com objetos, porém já é um processo de desestruturação diferente e acho que merece um artigo só para ele.

Espero que tenham conseguido entender o valor desses operadores em nosso dia-a-dia, pois são uma mão na roda.

E se você utiliza React por exemplo, o spread é muito valioso para setar valores em estados, já que o React parte do princípio da imutabilidade, então possivelmente (se você não estiver utilizando um MobX ou Redux por ex) será necessário copiar o valor o estado …stateAtual e adicionar o novo valor em seguida.

Um abraço e te espero no próximo artigo 😘…