1

Eso, hoy estaba probando unas cosas y me di cuenta de esto y no sé por qué sucede o cómo funciona.

Lo que pasa es lo siguiente, yo declaro un array:

```let array = [{"variable": "original"}, 2, 3];```

Si yo lo muestro por consola me marca exactamente eso, lo que corresponde, pero si yo creo un nuevo array filtrando al array anterior y modifico al objeto también se modifica en el array original.

```let newArray = array.filter(x => x.variable == 'original');

   newArray[0] = 'editado';```

Ahora si yo vuelvo a mostrar por consola el array original me muestra [{variable: "editado"}, 2, 3]

¿Cómo puede ser esto?

Aún si pongo el console.log(array) justamente debajo de donde declaro el array me sigue mostrando el valor editado y no el original. Siento que algo no estoy entendiendo.

Y esto solo veo que pasa cuando es un objeto el que se modifica, si filtro, por ejemplo, el 2 o el 3 y lo guardo en un nuevo array y lo edito, si imprimo en consola el valor del array original sigue siendo el mismo, no se modifica.

Perdón si no se entiende nada, son las 4am y tengo la cabeza quemada.

1
  • Entiendo que es tal como javascript pasa las refencias por valor. Mírate esto: medium.com/laboratoria-developers/… . Según parece los objetos de javascript siempre son referenciados por valor (lo digo por lo que acabo de leer, no tengo experiencia aun). Si quieres separarlos, por asi decirlo, debes copiarlo antes en un nuevo objeto.Para eso mira lo que dicen aqui
    – masterguru
    el 30 dic. 2021 a las 9:16

3 respuestas 3

2

Entiendo que el caso que representa lo que dices sería modificando una propiedad de un objeto dentro de un array:

let array = [{"variable": "original"}, 2, 3];

let newArray = array.filter(x => x.variable == 'original');

newArray[0].variable = 'editado'; // <-- modifica una propiedad

console.log(array);

console.log(newArray);

Lo que sucede es que .filter efectivamente retorna otro array, pero el nuevo array no es una copia profunda, los objetos anidados se seguirán pasando por referencia. Todos los métodos nativos que retornan otro objeto distínto del original funcionan con un solo nivel. Ejemplo:

let anidado = [1,2,3];

let array = [anidado, "valor original"];

let newArray = array.map(x => x); // <-- Solo copia el primer nivel

newArray[1] = 'valor editado'; // <-- modificamos el primer nivel, solo el nuevo

newArray[0][0] = 'anidado editado'; // <-- Modifica también el original anidado!!

console.log(array);

console.log(newArray);

1

Agregando a las respuestas ya dadas. Puedes mitigar este problema con una copia profunda eliminando la referencias que tienen los objetos embebidos convirtiendo todo a un string.

let anidado = [1,2,3];

let array = [anidado, "valor original"];

let newArray = JSON.parse(JSON.stringify(array)).map(x => x); // <-- Solo copia el primer nivel

newArray[1] = 'valor editado'; 

newArray[0][0] = 'anidado editado';

console.log(array);

console.log(newArray);

0

Ampliando lo que explica @Emeeus, una solución seria crear una copia "profunda" del objeto.
Un sistema "fácil" consiste en convertir todo ese objeto en texto, y luego convertirlo en otro objeto.
EDIT: He eliminado el uso de EVAL, ya que pone nerviosa a la gente.
Por ejemplo:

let array = [{"variable": "original"}, 2, 3];

let newArray = copiaArray(array).filter(x => x.variable == 'original');

newArray[0].variable = 'editado'; // <-- modifica una propiedad

console.log(array);

console.log(newArray);

function copiaArray(array){
  return JSON.parse(JSON.stringify(array));
}

Te invito a dar por correcta la respuesta de @Emeeus.

2
  • Por la estructura de tu código, con eval se podría inyectar código?
    – Legna
    el 30 dic. 2021 a las 19:16
  • @Legna: Como comento en la respuesta, al ser del lado del cliente, da igual, ya que el código es público y editable, cualquiera podría modificar lo que quiera. El problema seria del lado del servidor, si no se filtran las entradas de usuario. el 31 dic. 2021 a las 0:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.