Como copiar um array em JavaScript (sem referenciar)

Neste artigo você vai aprender a como copiar um array em JavaScript, e ainda não o copiaremos por referência, os dois arrays serão independentes

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

Para copiar um array podemos utilizar o método slice, que em outras circunstâncias é utilizado para retirar elementos de um array

Porém neste caso vamos utilizá-lo sem parâmetros, então o array todo será retirado

E desta maneira conseguimos uma cópia independente, que não é de referência do array pai

Veja um exemplo prático da solução:

let a = ['a', 'b', 'c'];

let b = a.slice();

console.log(b); // ['a', 'b', 'c']

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Veja que criamos um array e atribuimos a variável a

Depois criamos a variável b com o resultado do método slice em a

Desta maneira há agora dois arrays independentes no nosso programa, podemos alterar um sem afetar o outro

O que é um problema quando nós atribuimos um array de uma variável a outra, isso cria uma referência

Fazendo com que a alteração em um, reflita na outra lista

Conclusão

Neste artigo você aprendeu a como copiar um array em JavaScript, sem criar referência

Utilizamos o método de arrays slice, que é utilizado normalmente para fatiar arrays

Porém sem argumentos, ele retorna o array completo e origina uma cópia do original, fazendo com que o nosso objetivo seja atingido

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

E dá pra copiar com o spread também:

O slice resolve, mas ele não é o único caminho

Tem o operador spread, aqueles três pontinhos que você provavelmente já viu por aí em chamada de função

A ideia é simples: ele espalha os itens do array antigo dentro de um array novo, e esse array novo já nasce independente

Veja:

O resultado é o mesmo do slice, muda só a escrita

E tem mais uma vantagem: como você está montando um array novo na mão, dá pra já emendar itens no meio do caminho

legal né? 🙂

Como saber se a cópia funcionou mesmo?

Aqui vai um teste de 10 segundos que vale mais que qualquer explicação

Altera um dos arrays e imprime os dois

let b = a.slice();

b.push(‘d’);

Se o array a continuou do mesmo tamanho, cópia independente confirmada

Agora faça o mesmo trocando a segunda linha por let b = a

Aí o push vai aparecer nos dois, porque não existem dois arrays, existe um array e dois nomes apontando pra ele

faça o teste!

Cuidado: essa cópia é rasa

Tome cuidado com isso, é onde quase todo mundo se ferra (eu já me ferrei também)

O slice e o spread copiam o primeiro nível do array, e só ele

Se dentro do seu array tem outro array ou tem objeto, o que vai pro array novo é a REFERÊNCIA desses itens de dentro

Ou seja: você tem dois arrays independentes, mas com os mesmos objetos lá dentro

let a = [{ nome: ‘Matheus’ }];

Viu? mexi no b e o a mudou junto 😛

O array em si foi copiado, o objeto de dentro não

Pra esse caso você precisa de uma cópia profunda, que é quando os itens de dentro também viram cópias novas

É o próximo passo natural depois que a cópia rasa te morde

Então a regra prática fica assim: array de valores simples (string, number, boolean) o slice ou o spread resolve tranquilo, array de objetos ou array de arrays exige atenção

Slice ou spread: qual usar?

Os dois fazem a mesma coisa aqui, então a escolha é mais de gosto e de padrão do time do que de técnica

O spread costuma ler melhor, principalmente quando você já vai aproveitar e adicionar item na cópia

O slice tem a vantagem de ser um método com nome, o que ajuda quem está batendo o olho no código e ainda não tem intimidade com os três pontinhos

O que importa de verdade é entender POR QUE a cópia acontece: nos dois casos um array novo é criado, e é isso que quebra a referência

Sabendo disso, tu escolhe o que quiser e não se perde em código dos outros