Como unir dois arrays em JavaScript (merge)

Neste artigo você vai aprender a como unir dois arrays em JavaScript, prática conhecida como merge, de uma maneira simples e eficaz

Fala programador(a), beleza? Bora aprender mais sobre arrays e também sobre a linguagem JavaScript!

Para unir dois arrays ou fazer o merge entre eles, temos um método chamado concat

Este método é de array, ou seja, vamos utilizar ele a partir de um array

E como argumento colocar o segundo array que precisamos concatenar/unir com o primeiro

Veja então um exemplo prático da situação explicada acima:

var arr1 = [1, 2];
var arr2 = [3, 4];

var arr3 = arr1.concat(arr2);

console.log(arr3); // [1, 2, 3, 4]

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Criamos duas variáveis que contém arrays, e por fim uma outra última variável que utiliza o método concat para juntar dois arrays distintos

E como resultado temos o array [1, 2, 3, 4], que é a soma dos dois arrays anteriormente criados

Com a versão ES6 de JavaScript, podemos também utilizar o operador de destructuring

Que vai deixar as coisas ainda mais fáceis, veja um exemplo:

var arr1 = [1, 2];
var arr2 = [3, 4];

var arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4]

O destructing é utilizado pela sintaxe …, basicamente ele dá a possibilidade de utilizar todos os itens de um array para um determinado fim

Conclusão

Neste artigo você aprendeu a como unir dois arrays em JavaScript, utilizamos duas abordagens:

• concat: uma função de array, que pode unir dois arrays;
• destructuring: um operador da versão ES6 de JavaScript, que pode ser utilizado para o fim deste artigo, que é juntar duas listas;

Tome cuidado que nem todos os navegadores tem as funções de ES6 já prontas para o uso, isso pode fazer com que sua aplicação não funcione corretamente

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Adicionar um H2 do tipo ‘Como unir dois arrays sem repetir valores?’ mostrando o combo spread + Set

Muita gente cai aqui procurando justamente juntar duas listas e limpar os itens duplicados de uma vez

Explica o porquê antes: quando tu concatena dois arrays, os valores repetidos continuam lá, o merge não remove nada sozinho

Aí entra o Set, que é uma estrutura que só aceita valores únicos

Exemplo pra fechar:

O 3 aparecia duas vezes e o Set jogou fora a repetição, massa né?

Adicionar um H2 ‘Qual a diferença entre concat e o operador spread?’

Os dois fazem o merge, então qual usar?

O concat é função de array e roda em praticamente qualquer navegador, inclusive os mais antigos

O spread é da versão ES6, deixa a escrita mais enxuta e é o jeito mais moderno de juntar as listas

Na prática: se tu precisa de compatibilidade com ambiente velho, concat resolve

Se tu tá num projeto atual, o spread é mais limpo e faz o mesmo trabalho

Adicionar um H2 ‘Como unir mais de dois arrays em JavaScript?’

A ideia é a mesma, só que escalando pra três ou mais listas

Com o concat tu passa vários arrays como argumento de uma vez:

var todos = arr1.concat(arr2, arr3)

E com o spread é só ir espalhando um atrás do outro:

Os dois caminhos servem, escolhe o que combinar mais com teu código

Adicionar um bloco de perguntas frequentes com H3, cada uma respondendo sozinha:

H3 ‘Como unir dois arrays de objetos em JavaScript?’ O concat e o spread funcionam igual com arrays de objetos, eles juntam as listas sem mexer no conteúdo de cada objeto.

H3 ‘Dá pra juntar dois arrays sem criar um terceiro?’ Dá, com o spread dentro do push tu adiciona os itens de um array direto no outro: arr1.push(…arr2). Assim o arr1 passa a conter todos os valores, sem precisar de uma variável nova

H3 ‘O concat altera os arrays originais?’ Não, o concat não mexe nos arrays de origem, ele devolve um array novo com a união. Os originais continuam do jeito que estavam