Si has llegado aquí es bastante probable que tengas un problema de referencias y es que JavaScript cuenta con un comportamiento curioso cuando definimos un objeto como igualación a otro, te dejo un ejemplo:
const user = {
name: "Luis",
age: 32
}
const newUser = user
newUser.age = 33
console.log(newsUser)
// { name: "Luis, age: 33 } <-- 👍🏽 ...como se espera
console.log(user)
// { name: "Luis, age: 33 } <-- 👎🏽 hemos modificado este también... Esto es lo que se llama un «shallow copy», en bastantes caso lo que buscamos hacer es un «deep copy», una copia del objeto que podemos manipular a nuestro antojo.
Al copiar objetos nos encontramos ante «shallow copy» o «deep copy»
Tras googlear un poco di con 3 opciones, la primera y más sencilla es la deconstrucción del objeto o spread operator, te muestro como quedaría nuestro código:
Opción 1
const user = {
name: "Luis",
age: 32
}
const newUser = { ...user }
newUser.age = 33
console.log(newsUser)
// { name: "Luis, age: 33 } <-- 👍🏽 ...como se espera
console.log(user)
// { name: "Luis, age: 32 } <-- 👍🏽 ...mantiene sus valoresEn mi caso esta opción no me sirvió por tratarse de un array, así que probé a copiar de forma recursiva, lo que funciona bien con objetos y sus descendiente directos, pero en nuestro caso seguía sin ser la solución a nuestro problema.
Opción 2
const users = [
{ name: "Luis", age: 32 },
{ name: "Ana", age: 33 },
]
const newUsers = Object.assign([], users)
newUsers[0].age = 33
console.table(newsUsers)
/* 👍🏽 ...como se espera
/* | índice | name | age |
/* | 0 | Luis | 33 |
/* | 1 | Ana | 33 |
/************************************/
console.table(users)
/* 👎🏽 hemos modificado este también...
/* | índice | name | age |
/* | 0 | Luis | 33 |
/* | 1 | Ana | 33 |
/************************************/Finalmente aun que no me parece la opción más elegante di con la m´ás eficiente para mi caso, aun que no esta opción perdemos las funciones del objeto, nos puede ayudar en la mayoría de los casos.
Opción 3
const users = [
{ name: "Luis", age: 32 },
{ name: "Ana", age: 33 },
]
const newUsers = JSON.parse(JSON.stringify(users))
newUsers[0].age = 33
console.table(newsUsers)
/* 👍🏽 ...como se espera
/* | índice | name | age |
/* | 0 | Luis | 33 |
/* | 1 | Ana | 33 |
/************************************/
console.table(users)
/* 👍🏽 ...mantiene sus valores
/* | índice | name | age |
/* | 0 | Luis | 32 |
/* | 1 | Ana | 33 |
/************************************/Lo que estamos haciendo es convertir nuestro objeto en una cadena de texto y luego devolviendo a un estado más manejable.
¡Cuéntame en redes si te ha servido!
