Usando Spread Operator no Javascript

Por: Angelo Luis Ferreira | 10/06/2020 Acessos: 3.321

Neste tutorial vamos apresentar um recurso do JavaScript para expandir arrays de forma eficiente. Trata-se do Spread Operator, ou Operador Spread, que é uma sintaxe para converter um array em argumentos. É muito útil quando se precisa quebrar um array para passar seus valores para uma função ou construtor de um objeto como argumentos de valores separados. Serve principalmente como um atalho para unir 2 ou mais arrays independentes.

Obs.: Array, em programação, é uma estrutura de dados que armazena uma coleção de elementos de tal forma que cada um dos elementos possa ser identificado por, pelo menos, um índice ou uma chave.

1. Usando o operador Spread

1.1. O operador Spread é definido pela variável do array que se deseja expandir precedido por 3 pontos (...). Veja o exemplo abaixo:

arrA = [1,2,3]
arrB = [7,8,9]
arrC = [...arrA, 4 ,5, 6, ...arrB]

Observações:

1.1.1. O array arrC adicionou o arrA e o arrB aos elementos 4, 5, 6.

1.1.1.1. Foi utilizado o operador spread ...arrA

1.1.1.2. Foi utilizado o operador spread ...arrB

 Veja abaixo o resultado do nosso exemplo:

2. Expandir array retornado de uma função

2.1. Outra vantagem do Spread Operator é que podemos retornar um array de uma função para um novo array. Veja o exemplo abaixo:

function frutas() {
    return ['manga', 'mamão', 'pera', 'maçã']       
}

alimentos = [...frutas(), 'batata', 'arroz', 'feijão']

 Veja abaixo o resultado do nosso exemplo:

3. Passar um array como parâmetros de uma função

2.1. Casos onde você precisa usar um array como parâmetros em uma função. Veja o exemplo abaixo:

function minhaFuncao(x, y, z) {
		return x + y + z
}
let numbers = [10, 15, 21]

let soma = minhaFuncao(...numbers)

Veja abaixo o resultado do nosso exemplo:

 4. Usado como um "push' melhorado

4.1. Usado para adicionar um array no final de um array existente. Veja o exemplo abaixo, onde adicionamos o array compras no final do array existente frutas.

var frutas = ["Banana", "Orange", "Apple", "Mango"];
var compras = ["Kiwi", "Mamão", "Abacaxi"];

function myFunction() {
  frutas.push(...compras);
  document.getElementById("demo").innerHTML = frutas;
}

Veja abaixo o resultado do nosso exemplo:

Documentação Oficial

1. [Spread Operator] » Sobre o operador Spread - MDN Web Docs.

2. [push()] » Sobre o método push() - MDN Web Docs.