Pílulas de JavaScript: operador spread e parâmetro rest
Este é um post de uma série na qual compartilho alguns aprendizados da minha jornada no JavaScript no formato de mini artigos. Veja os posts anteriores no meu perfil!
Entre as numerosas novidades do ES6 há um novo e útil operador. O spread, escrito com reticências ..., permite distribuir o conteúdo de qualquer objeto iterável em múltiplos elementos.
Para começar, uma forma simples de testar o comportamento deste operador é usá-lo logo antes de uma variável e logar o resultado no console. Vamos aplicá-lo a um array:
const names = ['Lestat', 'Marius', 'Akasha'];console.log(...names);
// Lestat Marius Akasha
Observa-se que o array foi separado, ou espalhado, elemento a elemento.
As utilidades do operador spread na prática são amplas. Uma delas é a possibilidade de combinar arrays. Veja o exemplo abaixo:
const males = ['Lestat', 'Louis', 'Marius'];
const females = ['Pandora', 'Akasha'];const characters = [...males, ...females];console.log(characters);
// ['Lestat', 'Louis', 'Marius', 'Pandora', 'Akasha']
O resultado final guardado na variável characters é um array que combina os valores dos arrays males e females.
Há, ainda, uma variação desse operador: o parâmetro rest. Se pensarmos no operador spread como alguém que tira os elementos de uma caixa e espalha em outro lugar, podemos dizer que o parâmetro rest faz o oposto: ele coleta elementos espalhados e guarda em uma caixa.
O parâmetro rest também é escrito com reticências ... e permite representar um número indefinido de elementos como um array. Vamos esclarecer com um exemplo:
const author = ['Anne Rice', 1941, 'USA', 'Interview With The Vampire', 'The Vampire Lestat', 'The Queen of the Damned'];const [name, birth, country, ...books] = author;console.log(name);
// Anne Rice console.log(birth);
// 1941console.log(country);
// USA console.log(books);
// ['Interview With The Vampire', 'The Vampire Lestat', 'The Queen of the Damned']
Aqui, usamos desestruturação para recuperar os valores do array author e atribuí-los a variáveis isoladas. Seguindo a ordem dos elementos, name, birth e country recebem os três primeiros valores do array, enquanto books recebe o resto (por isso rest!) no formato de um array.
Por fim, podemos também utilizar o parâmetro rest para representar um número indefinido de argumentos em uma função variádica — ou seja, uma função que recebe um número infinito de parâmetros.
Vamos criar com ele uma função que soma qualquer quantidade de números e retorna o resultado:
function sum(...numbers) {
let result = 0;
for(const number of numbers) {
result += number;
}
return result;
}Agora, é possível chamar a função sum() com qualquer número de parâmetros:
sum(1, 2);
// 3sum(1, 10, 100, 1000);
// 1111
Por hoje é só e até a próxima ❤
