Valor vs Referencia en memoria
shallow copy Copia superficial
deep copy Copia profunda
JSON.parse()
String → JSON
JSON.stringify() Obj → String
Object.assign() - JavaScript | MDN
Spread Operator Does Not Deep Copy Properties
JSON.parse() - JavaScript | MDN
JSON.stringify() - JavaScript | MDN
Con variables
let a = 1
let b = a
console.log(a, b) // 1, 1
let a = 1
let b = a
b += 1
console.log(a, b) // 1, 2
Los objetos se comportan diferente a los primitivos
Cuando asignamos el valor de una variable de tipo objeto a otras variables, en realidad, estamos copiando la referencia al objeto inicial.
A pesar de que modifiquemos la copia de nuestras variables de tipo objeto, en realidad, estamos modificando el objeto original y, por lo tanto, todas las variables con la referencia a este objeto que acabamos de modificar:
let car = {
color: 'red',
year: 2019,
km: 0,
}
let car2 = car
car2.color = 'blue'
console.log(car, car2)
//{ color: 'blue', year: 2019, km: 0 } { color: 'blue', year: 2019, km: 0 }
Object assing nos permite copiar los valores del objeto y no la referencia. Solamente en el primer nivel
//(donde hace la copia, que accede)
let car2 = Object.assign({} , car)
car2.color = 'blue'
console.log(car, car2)
//output
// { color: 'red', year: 2019, km: 0 } { color: 'blue', year: 2019, km: 0 }
let car = {
color: 'red',
year: 2019,
km: 0,
owner: {
name: 'David',
age: 25
}
}
let car2 = {...car}
car2.owner.age += 1
console.log(car, car2)
// salida
{ color: 'red', year: 2019, km: 0,
owner: { name: 'David', age: 26 } }
{ color: 'red', year: 2019, km: 0,
owner: { name: 'David', age: 26 } }
Funciones JSON.parse y JSON.stringify
let car = {
color: 'red',
year: 2019,
km: 0,
owner: {
name: 'David',
age: 25
}
}
let car2 = JSON.parse(JSON.stringify(car))
car2.owner.age += 1
console.log(car, car2)
/* { color: 'red', year: 2019, km: 0,
owner: { name: 'David', age: 25 } }
{ color: 'red', year: 2019, km: 0,
owner: { name: 'David', age: 26 } } */
<aside> 📌 SUMMARY: Al copiar obj hay que tener cuidado de copiar el valor NO la referencia en memoria para luego poder modificar solamente lo que necesitamos Object.assing y Spread Operator realizan copias superficiales (de primer nivel) Con JSON.parse( JSON.stringify (obj)) realizamos copia profunda
</aside>