javascript - convertir - ¿Por qué un mapa js en una matriz modifica la matriz original?

javascript map object

Question

Estoy bastante confundido por el comportamiento del mapa ().

Tengo una serie de objetos como este:

const products = [{
    ...,
    ''productType'' = ''premium'',
    ...
}, ...]

y le estoy pasando esta matriz a una función que debería devolver la misma matriz pero con todo el producto hecho gratis:

[{
    ...,
    ''productType'' = ''free'',
    ...
}, ...]

La función es:

const freeProduct = function(products){
    return products.map(x => x.productType = "free")
}

Lo que devuelve la siguiente matriz:

["free", "free", ...]

Así que reescribí mi función para ser:

const freeProduct = function(products){
    return products.map(x => {x.productType = "free"; return x})
}

Lo que devuelve la matriz según lo previsto.

PERO ! Y ese es el momento en el que pierdo mi mente, en ambos casos, mi matriz de productos original se modifica.

La documentación sobre el mapa () dice que no debería ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ).

Incluso traté de crear un clon de mi matriz girando mi función como esta

const freeProduct = function(products){
    p = products.splice()
    return p.map(x => {x.productType = "free"; return x})
}

Pero sigo obteniendo el mismo resultado (que empieza a volverme loco).

¡Estaría muy agradecido a cualquiera que pueda explicarme lo que estoy haciendo mal!

Gracias

Answer 1

No estás modificando tu matriz original. Estás modificando los objetos en la matriz. Si desea evitar mutar los objetos en su matriz, puede usar Object.assign para crear un nuevo objeto con las propiedades del original más cualquier cambio que necesite:

const freeProduct = function(products) {
  return products.map(x => {
    return Object.assign({}, x, {
      productType: "free"
    });
  });
};

Edición 2018:

En la mayoría de los navegadores , ahora puede usar la sintaxis de propagación de objetos en lugar de Object.assign para lograr esto:

const freeProduct = function(products) {
  return products.map(x => {
    return {
      ...x,
      productType: "free"
    };
  });
};

Answer 2

Para elaborar la respuesta de SimpleJ: si tuviera que === las dos matrices, encontraría que no serían iguales (no la misma dirección en la memoria) confirmando que la matriz asignada es de hecho una nueva matriz. El problema es que estás devolviendo una nueva matriz, que está llena de referencias a los MISMOS objetos en la matriz original (no está devolviendo nuevos literales de objetos, está devolviendo referencias al mismo objeto). Por lo tanto, debe crear nuevos objetos que sean copias de los objetos antiguos, es decir, con el ejemplo de Object.assign proporcionado por SimpleJ.