Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Minha resolução para o exercício: clonando um array

No vídeo "Prática: métodos array", quando a instrutora comentou sobre deep copy, fui pesquisar alguns vídeos no YouTube para entender melhor sobre o assunto.

Em um vídeo, aprendi a utilizar o seguinte método: JSON.parse(JSON.stringify()). Compreendi que é mais utilizado em casos mais complexos, como:

// Exemplo em arrays:

let array1 = [[1, 2], 2, 3];

// Exemplo em objetos:

let person = {
  name: "Alex",
  age: 30,
  address: {
    city: "New York",
    zipCode: 10001,
  },
};

Porém, mesmo assim, decidi testar nesse exercício para ver como ficaria a resolução.

let pedidos = ["Jaqueta", "Tênis", "Camiseta", "Mochila", "Meias"];

let copiaDosPedidos = [...pedidos];
console.log(`Array original: ${pedidos}`);
console.log(`Cópia do array: ${copiaDosPedidos}`);

copiaDosPedidos.push("Chuteira");
console.log(`Array original sem 'chuteira': ${pedidos}`);
console.log(`Adicionando 'chuteira' no array copiado: ${copiaDosPedidos}`);

// Testando método JSON

let copiaUtilizandoDeepCopy = JSON.parse(JSON.stringify(pedidos));

console.log(`Array original: ${pedidos}`);
console.log(`Cópia do array com JSON: ${copiaUtilizandoDeepCopy}`);

copiaUtilizandoDeepCopy.push("Relógio");
console.log(`Array original sem 'relógio': ${pedidos}`);
console.log(`Adicionando 'relógio' no array copiado: ${copiaUtilizandoDeepCopy}`);
2 respostas
solução!

Olá, Diego. Como vai?

Sensacional a sua iniciativa de ir além do conteúdo do vídeo e pesquisar sobre Deep Copy (cópia profunda). Essa curiosidade de entender o que acontece por baixo dos panos é o que diferencia um bom desenvolvedor no mercado de JavaScript.

A sua resolução ficou ótima e provou na prática o ponto principal: ambos os métodos conseguiram clonar o array com sucesso, permitindo que você adicionasse elementos na cópia ("Chuteira" e "Relógio") sem alterar o array original (pedidos).

Para agregar ainda mais valor ao seu aprendizado, vamos entender por que a sua decisão de usar o operador Spread ([...]) para este exercício foi a mais correta, e qual é o grande perigo de usar a técnica do JSON.parse(JSON.stringify()) no dia a dia.


Cópia Rasa (Shallow Copy) vs. Cópia Profunda (Deep Copy)

O operador Spread ([...]) faz uma Cópia Rasa. Isso significa que ele copia perfeitamente elementos que são tipos primitivos (como os textos "Jaqueta", "Tênis", etc.). Se o seu array é simples e plano, o Spread é a melhor escolha: é rápido, elegante e performático.

No entanto, se você tiver um array dentro de outro array ou um objeto aninhado (como o endereço no exemplo que você pesquisou), o Spread falha. Ele copia apenas a "superfície", e os objetos de dentro continuam apontando para o mesmo lugar na memória.


O perigo oculto do truque do JSON

A técnica de transformar tudo em texto com JSON.stringify() e depois reconstruir com JSON.parse() realmente resolve o problema de criar uma cópia 100% nova na memória (um Deep Copy). Porém, ela tem três grandes limitações técnicas que você precisa conhecer:

  • Perda de Métodos e Funções: Se o seu objeto original tiver uma função dentro dele, essa função simplesmente desaparece após o processo do JSON, pois o formato JSON não aceita funções.
  • Problema com Datas: Se houver um objeto do tipo new Date() no seu array ou objeto, ele será convertido em uma string de texto puro. Você perde os métodos de data (como .getFullYear()).
  • Performance pesada: Para arrays ou objetos gigantes, esse processo de converter tudo para texto e depois ler o texto de volta consome muita memória e processamento.

Uma alternativa moderna: structuredClone()

Como esse truque do JSON era um quebra-galho muito comum, o próprio JavaScript evoluiu e criou uma função nativa e oficial para fazer Deep Copy sem nenhum desses problemas de perda de dados: o structuredClone().

Se você quiser fazer uma cópia profunda e segura hoje em dia, a boa prática é usar assim:

// Uma cópia profunda, nativa e segura no JavaScript moderno
let copiaProfundaSegura = structuredClone(pedidos);

copiaProfundaSegura.push("Relógio");

Parabéns pelos testes e por documentar os seus resultados com os console.log. Continue com essa mentalidade investigativa!

Espero que possa ter lhe ajudado!

Olá, Evandro. Espero que esteja bem!

Muito obrigado pela excelente explicação sobre shallow copy e deep copy, além do alerta sobre os cuidados ao utilizar JSON, já que esse método possui algumas limitações.

Agradeço também por apresentar o método structuredClone() para realizar cópias profundas de arrays e objetos. Ainda não conhecia essa abordagem, mas com certeza vou utilizá-la durante os estudos.

Tenha um excelente dia!