Como fazer uma cópia de array sem referência em JavaScript

Neste artigo você vai aprender a fazer uma cópia de array sem referência na linguagem JavaScript, de uma forma simples e eficaz

Fala programador(a), beleza? Bora aprender mais sobre arrays em JavaScript!

Quando atribuímos um array já criado a uma outra variável acabamos criando uma referência e não um novo valor

Ou seja, se alteramos o array de referência alteramos também o array pai, veja um exemplo:

var a = [1,2,3];
var b = a;

b[0] = 5;

console.log(a); // [5, 2, 3]

Então como solucionar isso? Criar um array que seja uma cópia de outro, porém independente

Podemos utilizar o slice, sem parâmetro algum, aí um novo array será criado e teremos esta cópia independente

Veja na prática:

var a = [1,2,3];
var b = a.slice();

b[0] = 5;

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

Temos o mesmo exemplo replicado, porém agora com slice, e o resultado é completamente diferente

O array b não é mais uma referência de a, e sim um dado completamente novo na memória do computador

Com a vinda do ES6 também temos uma possibilidade de cópia de array sem referência, veja:

var a = [1,2,3];
var b = [...a];

b[0] = 5;

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

Este recurso é chamado de destructuring, onde ele vai resgatar cada um dos elementos vindos de a e transformar no array b

Conclusão

Neste artigo vimos como criar uma cópia de array sem referência em JavaScript

Utilizamos duas abordagens: slice e destructuring

O slice sem parâmetros simplesmente cria o novo array baseado no antigo

Já o destructuring vai resgatar todos os elementos do array anterior e inserir no novo, lembrando que é uma funcionalidade do ES6 e não está padronizada para todos os navegadores, tome cuidado ao utilizar

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