Shallow Copy vs Deep Copy no JavaScript
Mateus Vinícius
Posted on April 26, 2023
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.
Posted on April 26, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024