Ultimamente me tornei um grande fã do spread operator, em português seria algo como “operador de propagação”.

Vamos ver a descrição do spread operator segundo a MDN:

O operador spread permite uma expressão ser expandida em locais onde múltiplos argumentos (por chamadas de função) ou múltiplos elementos (por array literais) são esperados.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator

É uma boa descrição para este operador mas pelo menos para mim fica difícil aprender apenas lendo sobre ele. Por isso, vamos ver agora alguns exemplos práticos para que você entenda e possa tirar vantagem deste operador.

Table of Contents

  1. Exemplo 1: Combinar arrays
  2. Exemplo 2: Destructuring
  3. Exemplo 3: Copiar Arrays
  4. Usando o operador spread com Objetos.

Exemplo 1: Combinar arrays

Podemos citar várias formas de combinar um array em outro. Mas o spread operator trouxe um novo uso para um método já existente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let frutas = ['morango', 'banana'];
let frutas2 = ['manga', 'caju'];

/*
* Se aplicarmos o spread operator junto o push, o resultado
* é adicionar o segundo array ao final do primeiro
*/
frutas.push(...frutas2) // ['morango', 'banana', 'manga', 'caju'];

/*
* Podemos aplicar também no unshift
* neste caso o segundo array será adicionado ao início do primeiro
*/
frutas.unshift(...frutas2) // [ 'manga', 'caju', 'morango', 'banana'];

Você também pode combinar elementos e colocá-los num ponto específico do array desta forma:

1
2
let frutas = ['morango', 'banana', 'pera', 'melancia', 'uva'];
let frutas2 = ['manga', ...frutas, 'caju']; // ['manga', 'morango', 'banana', 'pera', 'melancia', 'uva', 'caju']

Exemplo 2: Destructuring

O destructuring é algo muito legal e tenho utilizado bastante. Se você ainda não sabe o que é o destructuring, clique aqui e leia um pouco sobre isso antes de prosseguir.

1
2
3
4
let { a, b, ...c } = { a: 1, b: 2, x: 3, y: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(c); // {x:3, y: 4}

No exemplo acima, podemos ver que o spread operator também pode ser usado para o destructuring de tal forma que as chaves restantes sejam devolvidas para a variável como o resto do próprio objeto.

Exemplo 3: Copiar Arrays

É muito comum precisarmos obter a copia de um array no dia a dia.
Alguns já devem ter usado o slice para fazer isso, por exemplo:

1
2
3
let arr1 = [1,2,3,4,5];
let arr2 = arr1.slice();
console.log(arr2); // [1,2,3,4,5]

O clone do slice funciona, mas também é possível fazer um clone com o spread operator:

1
2
3
let arr1 = [1,2,3];
let arr2 = [...arr1]; // O mesmo resultado do slice()
console.log(arr2) // [1,2,3]

Usando o operador spread com Objetos.

Aqui é preciso prestar bem atenção, não porque fica mais díficil mas pela utilidade.
O spread operator pode ser usado para juntar propriedades de vários objetos em um só.

1
2
3
4
const animal = {nome: 'Harry', tipo: 'Porquinho da India'}
const informacoes = {idade: 3, peso: '1.1kg'}
const resumo = {...animal, ...informacoes}
console.log(resumo); // {nome: 'Harry', tipo: 'Porquinho da India', idade: 3, peso: '1.1kg'}

Você pode fazer isto com quantos objetos quiser, mas note que no caso de uma chave já existir em algum dos objetos, o valor mantido será o mais a direita.
Exemplo:

1
2
3
4
5
const animal = {nome: 'Harry', tipo: 'Porquinho da India'}
const informacoes = {idade: 3, peso: '1.1kg'}
const animal2 = {nome: 'Scooby', tipo: 'cachorro'}
const resumo = {...animal, ...informacoes, ...animal2}
console.log(resumo); // {nome: 'Scooby', tipo: 'cachorro', idade: 3, peso: '1.1kg'}

Veja que o valor da variável resumo descartou o primeiro valor do objeto animal porque incluimos os valores do animal2, que estava mais a direita no uso do spread.

É importante saber que você pode usar o Object.assign para ter o mesmo efeito mas o uso do operador spread torna as coisas um pouco mais simples.