6 formas de utilizar o operador de propagação em JavaScript

Graças ao ES6 e ao Babel, escrever código JavaScript tem se tornado incrivelmente dinâmico, das novas sintaxes da linguagem até o parse personalizado como o JSX. Eu me tornei um grande fã do operador de propagação, 3 pontos que podem mudar a forma como você resolve uma tarefa em JavaScript. A lista seguinte mostra as formas como gosto de usar o operador de propagação em JavaScript!

Chamando funções sem Apply

Até agora nós chamamos Function.prototype.apply para passar um array de argumentos para uma função com um certo número de parâmetros.

function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Chama a função doStuff passando args
doStuff.apply(null, args);

Com o operador de propagação nós podemos substituir de vez o Apply e simplesmente chamar a função com o operador de propagação antes do array:

doStuff(…args);

O código é menor, limpo, e sem a necessidade de usar um null inútil!

Combinar Arrays

Existem uma variedade de formas de combinar arrays, mas o operador de propagação nos fornece um novo método para combinar arrays:

arr1.push(…arr2) // Adiciona os itens de arr2 no final de arr1
arr1.unshift(…arr2) // Adiciona os itens de arr2 no início de arr1

Se você quer combinar dois arrays e colocar os elementos em qualquer ponto do array, você pode fazer da seguinte maneira:

var arr1 = [‘two’, ‘three’];
var arr2 = [‘one’, …arr1, ‘four’, ‘five’];
// ["one", "two", "three", "four", "five"]

A sintaxe é menor que outros métodos que fazem o controle de posições!

Copiando Arrays

Fazer a cópia de um array é uma tarefa frequente, antigamente nós utilizamos Array.prototype.slice para fazer isto, mas nós podemos agora utilizar o operador de propagação para criar uma cópia de um array:

var arr = [1,2,3];
var arr2 = […arr]; // como em arr.slice()
arr2.push(4)

Lembre-se: objetos dentro de arrays ainda continuam sendo por referência, por isso nem tudo é “copiado”.

Converter argumentos ou NodeList para Array

Além de copiar arrays, nós usamos Array.prototype.slice para converter NodeList e o objeto arguments para arrays de verdade, mas agora nós podemos usar o operador de propagação para fazer esta tarefa:

[…document.querySelectorAll(‘div’)]

Você pode também pode obter os argumentos de uma função como um array de argumentos:

var myFn = function(…args) {
// …
}

Não de esqueça que você pode também fazer isto com Array.from!

Usando função do Math

Claro que o operador de propagação pode distribuir os itens em diferentes argumentos, então em cada função onde operador de propagação é utilizado como um argumento ele pode ser utilizado por funções que aceitam qualquer número de argumentos.

let numbers = [9, 4, 7, 1];
Math.min(…numbers); // 1

O conjunto de funções do objeto Math é um exemplo perfeito para operador de propagação como o único argumento para uma função.

Destructing

Destructing é uma prática que utilizo muito nos meus projetos React, como em outras aplicações em Node.js. Você pode utilizar o destructuring e o operador rest juntos para extrair informações para variáveis da seguinte forma:

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

As propriedades que sobram são atribuídas para a variável do operador de propagação!

ES6 não só fez JavaScript mais eficiente, mas também mais divertido. Hoje todos os navegadores modernos suportam a nova sintaxe do ES6 então se você ainda não tirou um tempo para brincar com ES6, você definitivamente deveria.

De fato, o operador de propagação é um recurso útil em JavaScript e você deve estar ciente disso!

Créditos

• 6 Great Uses of the Spread Operator, escrito originalmente por David Walsh