Shallow Copy vs Deep Copy no JavaScript

Uma shallow copy de um objeto é uma cópia que, embora aponte para uma referência diferente do objeto original, suas propriedades ainda apontam para as mesmas referências na memória. Portanto, embora sejam objetos diferentes, a alteração do valor de uma propriedade do objeto original também alterará o valor da mesma propriedade na cópia, e vice-versa.

É possível criar uma shallow copy usando o método Object.assign, spread operator e etc.

const person = {
    name: 'Tom',
    age: 55,
    bestFriend: {
        name: 'Rob',
        age: 33
    }
}

// Shallow copy
const person2 = {...person}

console.log(person === person2) // false

console.log(person.bestFriend === person2.bestFriend) // true

person.bestFriend.name = 'Ben'

console.log(person.bestFriend.name) // Ben
console.log(person2.bestFriend.name) // Ben

Importante lembrar que, no JavaScript, todo valor primitivo (como número, string, etc.) é armazenado diretamente no objeto, e não apenas sua referência na memória. Por isso, mesmo em uma shallow copy de um objeto, suas propriedades primitivas serão diferentes e a modificação do valor no objeto original não afetará o valor na cópia, e vice-versa.

const person = {
    name: 'Tom',
    age: 55,
    bestFriend: {
        name: 'Rob',
        age: 33
    }
}

// Shallow copy
const person2 = {...person}

console.log(person === person2)

person.name = 'Bob'
console.log(person.name) // Bob
console.log(person2.name) // Tom

Já a deep copy é o oposto de uma shallow copy, sendo uma cópia do objeto em que todas as referências apontam para locais diferentes na memória em relação ao objeto original. Dessa forma, alterar o valor de uma propriedade no objeto original não afetará o valor da mesma propriedade na cópia, e vice-versa.

É possível criar uma deep copy de um objeto usando o método JSON.parse, a biblioteca lodash do Node ou uma função recursiva que utilize spread operator.

const person = {
    name: 'Tom',
    age: 55,
    bestFriend: {
        name: 'Rob',
        age: 33
    }
}

// Deep copy
const person2 = JSON.parse(JSON.stringify(person))

console.log(person === person2) // false

console.log(person.bestFriend === person2.bestFriend) // false

person.bestFriend.name = 'Ben'

console.log(person.bestFriend.name) // Ben
console.log(person2.bestFriend.name) // Rob

Compreender as diferenças entre shallow copy e deep copy pode ajudar a evitar erros ou mudanças inesperadas nos valores dos objetos.