1

Les comento mi inquietud, quisiera saber porque si tengo un arreglo de objetos y busco uno de estos a través del método find(), al momento de almacenarlo en una variable y realizar la modificación de esta variable también se modifica el arreglo declarado.

Espero que la explicación en codigo pueda ser más clara.

// Supongamos que tenemos un arreglo de empleados, donde cada uno es un objeto
const employees = [
  {id: 1, name: 'Jhon', position: 'Manager'},
  {id: 2, name: 'Felix', position: 'Administrator'}
]

let employeeFinded = employees.find( (employee) => employee.id == 1) // obtenemos el trabajador de id == 1
employeeFinded.name = 'Morgan'; // Esto cambiando la variable, no el arreglo principal

console.log(employees); // Al mostrar el arreglo principal me indica que el nombre del primer empleado es "Morgan"

// Output:
/*
    [{
    id: 1,
    name: "Morgan",
    position: "Manager"
  }, {
    id: 2,
    name: "Felix",
    position: "Administrator"
  }]
*/
1
  • 3
    En JavaScript, cuando asignamos un valor a una variable, o pasamos un argumento a una función, este proceso siempre se hace “por valor” (by value en inglés). Estrictamente hablando, JavaScript no nos ofrece la opción de pasar o asignar “por referencia” (by reference en inglés), como en otros lenguajes. Lo interesante en nuestro caso, es que cuando una variable hace referencia a un objeto (Object, Array o Function), el “valor” es la referencia en sí. por valor o referencia
    – Jozaguts
    Commented el 5 jul. 2022 a las 22:13

2 respuestas 2

2

es por que Javascript maneja los objetos por referencia.

Aquí le estas pasando la referencia en memoria RAM, por ende al modificar su referencia se cambia en todos los lados.

employeeFinded = employees.find( (employee) => employee.id == 1) 

Cuando asignamos valores primitivos (Boolean, Null, Undefined, Number, String y Symbol), el valor asignado es una copia del valor que estamos asignando. Pero cuando asignamos valores NO primitivos o complejos (Object, Array y Function), JavaScript copia “la referencia”, lo que implica que no se copia el valor en sí, si no una referencia a través de la cual accedemos al valor original.

En este tipo de casos se recomienda utilizar otro tipo de funciones que retornan un nuevo objeto en memoria como por ejemplo filter.

Solución Quick and Dirty

let employeeFinded = Object.assign({}, employees.find((employee) => employee.id == 1))
0
Esto si muta al array original al cambiar como vos decís la variable
employeeFinded!.name = 'Morgan'; 
Sea:
const employees = [
  {id: 1, name: 'Jhon', position: 'Manager'},
  {id: 2, name: 'Felix', position: 'Administrator'}
]
Si buscamos al objeto con id=1
let employeeFinded = employees.find( (employee) => employee.id == 1) 
y quisiéramos modificar su  name sin mutar al array original
let empleadoNuevo = Object.assign({}, employeeFinded, { name: 'nuevo' });
//asi  no mutamos a la variable name de valor Jhon del objeto con id=1
console.log(empleadoNuevo)
/*
{
    "id": 1,
    "name": "nuevo",
    "position": "Manager"
}
*/

También con el operador de propagación (spread operator) podemos obtener una copia independiente del objeto obtenido employeeFinded que pertenece al array de objetos employees teoria:operador propagacion Clonamos Objetos mediante una copia superficial

const employees = [{
    id: 1,
    name: 'Jhon',
    position: 'Manager'
  },
  {
    id: 2,
    name: 'Felix',
    position: 'Administrator'
  }
]

// obtenemos el objeto que contiene al trabajador de id == 1
let employeeFinded = employees.find((employee) => employee.id == 1);
console.log('employeeFinded:', employeeFinded)
//creamos un nuevo Objeto con las mismas propiedades
// una copia independiente del original
let nuevoObjeto = { ...employeeFinded
};
// modificamos su nombre
nuevoObjeto.name = 'Pepe';
console.log('nuevoObjeto:', nuevoObjeto);
// el Array original no muto
console.log('employess:', employees)

//Los primitivos son copiados en forma independiente
let a = 2;
let b = a;
b = a + 1;
console.log('a:', a, 'b:', b)
let c = false;
let d = c;
d = true;
console.log('c:', c, 'd:', d)

// No asi los no primitivos
let user = {
  id: 1,
  name: 'Jhon',
  position: 'Manager'
};

let admin = user; // asi copiamos la referencia
admin.name = 'Pete';
console.log('admin:', admin, 'user:', user)
console.log(admin === user)

Asi solo creamos una referencia adicional al mismo objeto object copy

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.