JavaScript
Explica cómo cambian los objetos por mutación o mediante valores nuevos, el efecto de referencias compartidas y el uso de structural sharing.
Un valor es mutable cuando puede cambiar sin crear otra identidad. Trabajar de forma inmutable significa representar un cambio mediante un valor nuevo en lugar de modificar el anterior.
const product = {
name: "Keyboard",
price: 120,
};
product.price = 150;Aquí se muta el mismo objeto.
const updatedProduct = {
...product,
price: 150,
};let name = "Nicolás";
name.toUpperCase();
console.log(name); // "Nicolás"El string original no cambia. toUpperCase devuelve otro string.
name = name.toUpperCase();La variable puede reasignarse, pero el valor primitivo anterior no fue modificado.
const user = {
profile: {
city: "Bogotá",
},
};
user.profile.city = "Medellín";La identidad exterior sigue siendo la misma.
const before = user;
user.profile.city = "Cali";
before === user; // trueconst cart = {
items: [],
};
cart.items.push("Keyboard"); // Permitido.
cart = {}; // TypeError.const evita reasignar el binding cart; no congela el objeto referenciado.
const original = {
status: "pending",
};
const alias = original;
alias.status = "completed";
console.log(original.status); // "completed"Ambos bindings apuntan al mismo objeto. La mutación es visible desde cualquiera de ellos.
Este comportamiento puede ser útil cuando el objeto representa estado compartido intencional, pero también puede producir cambios difíciles de rastrear.
No toda mutación tiene el mismo riesgo.
function createReport(orders) {
const report = [];
for (const order of orders) {
report.push({
id: order.id,
total: order.total,
});
}
return report;
}report se muta dentro de la función, pero no era visible desde fuera antes de retornarlo. Esta mutación local es fácil de controlar.
Más riesgoso:
function addOrder(orders, order) {
orders.push(order);
}La función modifica una colección recibida desde fuera. Quien la llama debe conocer ese efecto.
Una alternativa:
function addOrder(orders, order) {
return [...orders, order];
}Antes de mutar, pregunta:
Una API con intención explícita puede mutar correctamente.
cart.addItem(product);El nombre comunica que el carrito cambiará.
Una función de transformación suele comunicar otro contrato.
const updatedCart = addItem(cart, product);const updatedUser = {
...user,
name: "Nico",
};Para arrays:
const updatedItems = [
...items,
newItem,
];Para reemplazar un elemento:
const updatedProducts = products.map((product) =>
product.id === targetId
? { ...product, price: 150 }
: product,
);Solo el producto modificado recibe una identidad nueva. Los demás objetos pueden reutilizarse.
const updatedUser = {
...user,
profile: {
...user.profile,
city: "Cali",
},
};Cada nivel del camino que cambia necesita una copia nueva.
Esto se conoce como structural sharing: las ramas sin cambios se comparten; las ramas modificadas se reemplazan.
updatedUser.settings === user.settings; // true, si no cambió.
updatedUser.profile === user.profile; // false.Muchas herramientas detectan cambios mediante referencias.
previousUser === nextUser;Si mutas el mismo objeto:
user.name = "Nico";
setUser(user);La referencia puede seguir siendo igual y el sistema puede no reconocer correctamente el cambio.
En React, una actualización típica crea una referencia nueva.
setUser((currentUser) => ({
...currentUser,
name: "Nico",
}));Esto no significa que React exija que todo el programa sea profundamente inmutable. Significa que el estado expuesto a su sistema de actualización debe respetar su contrato.
La inmutabilidad facilita conservar versiones.
const history = [
initialState,
secondState,
thirdState,
];Si cada estado anterior se mutara después, el historial dejaría de representar el pasado.
function applyDiscount(product, percentage) {
return {
...product,
price: product.price * (1 - percentage),
};
}La función no modifica product; devuelve otro objeto.
Esto facilita pruebas y razonamiento, pero no toda función necesita ser pura. Las operaciones de red, almacenamiento o UI producen efectos por naturaleza.
Mutan el array:
push
pop
shift
unshift
splice
sort
reverse
fill
copyWithinCrean otro array o valor:
map
filter
slice
concat
toSorted
toReversed
toSpliced
withLa clasificación depende del método. Consulta su contrato en lugar de asumir por el nombre.
const sortedProducts = products.sort(byPrice);sortedProducts y products son el mismo array ordenado.
Alternativas:
const sortedProducts = [...products].sort(byPrice);const sortedProducts = products.toSorted(byPrice);La primera copia es superficial; los productos interiores continúan siendo los mismos objetos.
Object.freeze(configuration);Impide ciertos cambios directos en ese objeto, pero solo de forma superficial.
La inmutabilidad como estrategia es una decisión sobre cómo fluye el estado. Object.freeze es una restricción aplicada a un objeto concreto. Se profundiza en Object.freeze y Object.seal.
Copiar estructuras grandes sin necesidad puede tener costos de memoria y CPU.
Además, algunas APIs están diseñadas alrededor de mutación controlada:
Map.set.Set.add.La pregunta correcta no es “¿mutación sí o no?”, sino “¿quién puede observar este cambio y está claramente definido?”.
function decreaseStock(products, productId, quantity) {
return products.map((product) => {
if (product.id !== productId) {
return product;
}
return {
...product,
stock: product.stock - quantity,
};
});
}La colección y el producto modificado reciben referencias nuevas. Los demás productos conservan las suyas.
const vuelve inmutable un objeto.sort esperando un array nuevo.Object.freeze sea profundo.const evita reasignación, no mutación.¿Qué imprime el último console.log?
const user = {
profile: {
city: "Bogotá",
},
};
const copy = {
...user,
};
copy.profile.city = "Cali";
console.log(user.profile.city);Imprime "Cali". La copia exterior es nueva, pero profile continúa siendo el mismo objeto compartido.
Copias superficiales y profundas explica exactamente qué se duplica en cada estrategia y cuándo structuredClone es apropiado.