Operadores Spread e Rest Javascript

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 desenvolvedores(as).

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?

const dataUser = ['Michelle', 1964, '1,80m', 'Chicago'];

const newUser = [...dataUser, 'married', 'mom'];

console.log(dataUser); // (4) ['Michelle', 1964, '1,80m', 'Chicago']
console.log(newUser); // (6) ['Michelle', 1964, '1,80m', 'Chicago', 'married', 'mom']

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:

const dataUser = {
  name: 'Ilda',
  age: 23,
  office: 'desenvolvedora',
}

const newuser = { ...dataUser }

console.log(dataUser) // {name: 'Ilda', age: 23, office: 'desenvolvedora'}
console.log(newUser) // {name: 'Ilda', age: 23, office: 'desenvolvedora'}

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.

const data = [2, 8, 6]

function sum(x, y, z) {
  return x + y + z
}

sum(1, 2, 3) // Opção 1
sum(data[0], data[1], data[2]) // Opção 2

Com o spread precisaríamos apenas:

const data = [2, 8, 6]

function sum(x, y, z) {
  return x + y + z
}

console.log(sum(...data)) // 16

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:

const firstName = ['Ilda']
const surname = ['Neta']
const fullName = [...firstName, ...surname]

console.log(fullName) // (2) ['Ilda', 'Neta'];

console.log(...fullName) // Ilda Neta

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:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8]
const [um, dois, tres, quatro, ...restNumbers] = numbers

console.log(um) // 1
console.log(quatro) // 4
console.log(restNumbers) // (4) [5, 6, 7, 8]

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.

const person = ['Michelle', 1964, '1,80m', 'Chicago', 'MIT']

const [name, yearBirthday, height, ...personData] = person

console.log(name) // Michelle
console.log(height) // 1,80m
console.log(personData) // (2) ['Chicago', 'MIT']

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 yearBirthday 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.

Um abraço e te espero no próximo artigo! 👋🏻