4 segredos do operador Spread em Javascript

Você conhece o operador Spread do JavaScript? Ele é representado por três pontos, sim, o Spread operator é o famoso ‘…’ (três pontinhos para os mais íntimos). Ele basicamente permite que expressões expandam o conteúdo de arrays em locais onde múltiplos elementos são esperados.

Conseguiu entender?

Vou mostrar de um jeito mais prático. Imagine o seguinte código abaixo:

Note que neste caso eu não usei o Spread. Ao colocar o array dentro de outro array (formando um jagged array ou nested array, erroneamente chamado de matriz em algumas universidades) temos um resultado um tanto inusitado ao imprimir ‘arr’.

Agora experimente colocar ‘…’ antes do array middle para você ver o que acontece, como abaixo:

Spread significa espalhar, ou seja, este operador é usado para ‘espalhar’ os elementos de um array quando interpretado em tempo de execução. Neste último caso, os itens de middle foram espalhados dentro de arr.

Este é o uso default do Spread operator, mas ele é mais poderoso que isso, e é desses segredos que quero falar no artigo de hoje.

Segredo #1 – Cópia de arrays com Spread

Você sabe como copiar um array em JavaScript? Programadores mais novatos podem achar que isso aqui funciona:

Mas infelizmente a vida não é tão simples. Neste caso arr2 não é uma cópia de arr, mas sim o próprio arr, uma vez que a referência de memória de ambos é a mesma. Duvida, então teste isso:

Notou que ao adicionar um item no arr2, ele também aparecer no arr? Isso porque eles são os mesmos! Uma das maneiras corretas de fazer isso é usando funções específicas.

Se você programa JavaScript há algum tempo deve conhecer a função slice, certo? É aquela que te permite copiar arrays. Mas você sabia que também conseguimos copiar arrays usando o Spread?

Ao expandirmos o array com o Spread, o valor de seus itens são copiados pra dentro do outro array. Ambos arrays são independentes, então é claramente uma forma de copiar arrays que funciona.

Segredo #2 – Concatenação de arrays com Spread

E se eu quero juntar dois arrays? Já sacamos que usar o operador de atribuição (=) não resolve. O operador de soma obviamente também não. Você sabe qual a função específica que faz isso no JavaScript? A concat:

Mas você sabia que tem um jeito muito mais fácil de fazer isso usando o Spread operator?

Bacana, não?!

Segredo #3 – Operações matemáticas com Spread

Você sabia que é possível usar as funções matemáticas do JavaScript em conjunto com o Spread?

Vamos começar falando do Math.max(), função que retorna o maior de um grupo de números, que passamos a ela por parâmetro.

Não tem como passarmos um array por parâmetro nesta function, mas com uma função auxiliar sim, embora fique bem estranho:

Mas e o Spread?

Show, hein!

Segredo #4 – String para Array

E se você precisar transformar uma string em um array de caracteres? Tipo nos tempos do C-ANSI, lembra?

Essa é bem fácil, como abaixo:

E é isso por hoje, o artigo foi curto, mas a intenção foi grande! Até a próxima! 😉

Quer se aprofundar mais em JavaScript e Node.js? Dá uma olhada no meu curso abaixo.

Curso Node.js e MongoDB
Curso Node.js e MongoDB
O que achou desse artigo?
[Total: 9 Média: 4.9]

Publicado por

Luiz Duarte

Pós-graduado em computação, professor, empreendedor, autor, Agile Coach e programador nas horas vagas.