Merge de Arrays no Javascript

Alguns dias atrás, precisei desenvolver uma feature que exigia o merge de dois arrays. Inicialmente, utilizei o spread operator (...), resultando no seguinte código:

const array1 = Array.from({length: 10000}, (_, index) => index)
const array2 = Array.from({length: 10000}, (_, index) => index)
 
const all = [...array1, ...array2 ]

Duração do script em milissegundos 7.838104993104935

A princípio, isso resolveu meu problema, e consegui realizar o merge dos arrays. No entanto, fiquei me perguntando se haveria uma maneira de melhorar a performance. Ao consultar a documentação, encontrei o método concat.

Merge com o Concat

O método concat é utilizado justamente para mesclar dois ou mais arrays, sem alterar os arrays existentes, mas retornando um novo array mesclado. Com o uso do concat, o merge ficaria da seguinte forma:

const array1 = Array.from({length: 10000}, (_, index) => index)
const array2 = Array.from({length: 10000}, (_, index) => index)
 
const all = [].concat(array1, array2)

Duração do script em milissegundos: 2.6480610072612762

Como podemos ver, com o uso do concat, conseguimos uma redução de mais de 50% no tempo de execução do merge, tornando-o, em muitos casos, uma alternativa muito mais eficiente que o spread operator.

Bônus: remover itens duplicados

Nessa mesma feature em que estive trabalhando, precisei remover os itens duplicados do array retornado do merge. Podemos fazer isso utilizando o método indexOf, ficando da seguinte maneira:

const array1 = Array.from({ length: 10000 }, (_, index) => index);
const array2 = Array.from({ length: 10000 }, (_, index) => index);
 
const all = [].concat(array1, array2);
 
const arrayWithoutDuplicates = all.filter(
    (item, index) => all.indexOf(item) === index
);

Duração do script em milissegundos: 36.275166511535645

Como podemos ver acima, fazemos um filtro no nosso array mergead o, passando um callback que verifica se o índice do primeiro aparecimento do item no array all é igual ao índice atual (index) do loop. Dessa forma, o callback retorna true apenas para a primeira ocorrência do item.

Porém, podemos remover os itens duplicados de uma maneira muito mais performática utilizando o Set. O objeto Set permite armazenar valores únicos — cada valor pode ocorrer apenas uma vez. Essa nova abordagem ficaria da seguinte forma:

const array1 = Array.from({ length: 10000 }, (_, index) => index);
const array2 = Array.from({ length: 10000 }, (_, index) => index);
 
const all = [].concat(array1, array2);
 
const arrayWithoutDuplicates = new Set(all);

Duração do script em milissegundos: 2.5936660766601562

Conclusão

Como podemos ver nos exemplos acima, o uso adequado de técnicas em JavaScript pode melhorar substancialmente a performance do seu código. Para mesclar arrays, podemos usar o método concat, e para remover duplicados, podemos utilizar o objeto Set.

Referências

• Spread Syntax - MDN Web Docs
• Array.prototype.concat() - MDN Web Docs
• Array.prototype.indexOf() - MDN Web Docs
• Set - MDN Web Docs