JavaScript Pill — Spread Operator
Olá, esta série de posts que aqui se inicia, tem como objetivo principal reforçar nossos conhecimentos sobre JavaScript, em meu caso, especialmente em relação ao ES6, pois ainda não surgiram as oportunidades para aplicá-los no dia-a-dia. Um outro objetivo que tentarei alcançar, é divulgar, de forma simplificada, divertida e em pt-br (hUEHeUHeUheu), tais conhecimentos; para ajudar a comunidade de alguma forma. 😃
Para dar o “Start inicial” (piada interna da Sysvale) da série, irei falar sobre o Spread Operator.
Vamos às definições.
- Segundo o MDN Web Docs:
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.
- De acordo com o Underground WebDev:
O operator spread basicamente converte um array em argumentos, ele é muito útil quando se precisar quebrar um array para passar seus valores para uma função ou construtor de um objeto como argumentos de valores separados.
- O Brandon Morelli, criador do codeburstio define o operador como:
The spread operator allows an expression to be expanded in places where multiple elements/variables/arguments are expected.
- Uma outra face abordada pelo devPleno é que:
O spread operator é usado com bastante frequência principalmente quando queremos utilizar a imutabilidade, ou seja, criar um objeto novo a partir de um objeto existente.
Em suma…
O spread operator (“…” 👈 esses três pontinhos são a representação gráfica do operador) é uma funcionalidade do ECMAScript 2015 que permite expandir um array/objeto/string em um conjunto de argumentos separados. O operador retorna um novo objeto sem alterar o objeto original e é útil principalmente quando se necessita de múltiplos argumentos/elementos.
Vamos exemplificar um pouco…
Imaginemos uma função que recebe três argumentos (x, y e z) e realiza a soma dos três. Caso você disponha de um array com os dados basta utilizá-lo da seguinte forma:
Essa sintaxe, é chamada de sintaxe de espalhamento. Ela separa os valores do array com vírgulas. Então, produz o mesmo resultado que utilizar
somaArgs(1, 5, 23);. Daí o nome spread operator.
Caso haja a necessidade de mais argumentos, além dos que estão presentes no array, ainda podemos usar o operador de forma indiferente, observe o trecho abaixo.
Vale ressaltar que, caso a quantidade de elementos no array, que será aplicado como argumento da função, seja muito elevada, há a possibilidade de se exceder o tamanho máximo de argumentos do motor do JavaScript.
O operador spread pode substituir o apply na chamada de uma função onde seus parâmetros estão em um array. Entretanto, o ganho maior ocorre quando se utiliza o new para instânciar um objeto. Pois, não é possível utilizar o apply em conjunto com o new, porque o apply executa a call e não o construct de uma classe. Observe:
Além dessas aplicações do spread operator nas chamadas de funções, é possível, também, aplicá-lo na manipulação de arrays e até mesmo de strings, veja abaixo.
É sabido que, no caso do array4, utilizar
var array4 = array3.concat(arra2)produz o mesmo resultado que a expansão com o spread operator, e é cerca de 3 ordens de grandeza mais veloz. Mas, não entraremos no mérito de performance nesse artigo.
No caso de objetos, também é possível espalhar as propriedades para um novo objeto. Porém a sintaxe de espalhamento utilizada no exemplo de string anterior não é valida aqui, devido ao fato do objeto não ser iterável.
Sendo um pouco repetitivo à respeito da imutabilidade, é importante salientar que o array/string/objeto original é sempre preservado quando se utiliza o spread operator.
Essas são as aplicações básicas que eu gostaria de comentar sobre o spread operator. Em minha opinião, ele torna o código mais sucinto, elegante e até mesmo mais “descolado”.
Até mais!
