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

O JavaScript lida com a cópia de duas maneiras, dependendo do tipo de dado.

Valores Primitivos (Cópia por Valor)

Tipos primitivos incluem strings, numbers, booleans, symbols, bigInt e null. Ao copiar um primitivo, o JavaScript cria uma nova versão independente na memória.

Exemplo:

let a = 10;
let b = a;
b = 20;

Resultado: a permanece 10.

Valores Não Primitivos (Cópia por Referência)

Objetos e arrays funcionam de forma diferente. Eles utilizam referências. Ao copiar um objeto, você copia apenas o ponteiro para sua localização na memória.

Exemplo:

let original = { name: "YOO" };
let copy = original;
copy.name = "NEW";

Resultado: original.name agora é "NEW".

A Diferença: Rasa vs. Profunda

Uma cópia rasa (shallow copy) copia o nível superior de um objeto. Se o objeto possuir objetos aninhados, ela ainda apontará para as referências aninhadas originais. Uma cópia profunda (deep copy) cria um objeto completamente novo com todos os novos valores.

Pense nisso como uma pizza:

• Cópia Rasa: Você e um amigo compartilham uma pizza. Se seu amigo comer uma fatia, a pizza ficará menor para você também.
• Cópia Profunda: Vocês dois têm suas próprias pizzas separadas. Se seu amigo comer uma fatia, sua pizza continuará a mesma.

Método de Cópia Rasa

Você pode usar o spread operator (...) para fazer uma cópia rasa.

let original = { name: "YOO", details: { age: 22 } };
let copy = { ...original };

Aviso: Se você alterar original.details.age, o copy.details.age também mudará. Esta é a armadilha da cópia rasa.

Métodos de Cópia Profunda

1. structuredClone()

Esta é uma função nativa em navegadores modernos e no Node.js. Ela lida com estruturas aninhadas perfeitamente.

Prós:

• Rápida e nativa.
• Lida com Dates, RegExp e Maps.

Contras:

• Falha se o objeto contiver funções ou nós do DOM.

2. JSON.parse(JSON.stringify())

Este é um truque antigo onde você transforma um objeto em uma string e depois de volta em um objeto.

Por que evitar:

• Ele perde dados como undefined, Map, Set ou Infinity.
• Pode corromper certos valores.

Fonte: https://dev.to/yogesh_992/shallow-copy-vs-deep-copy-in-java-script-explained-in-easiest-way-3dg5