Congelación superficial frente a profunda
Comprenda hasta dónde llega la congelación.
Congelación superficial frente a profunda es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
freeze es superficial
Object.freeze solo bloquea el nivel superior de un objeto. Cualquier objeto o matriz anidado al que haga referencia sigue siendo completamente mutable.
Esto sorprende a muchos desarrolladores y provoca errores sutiles.
Demostración del límite superficial
Congele un objeto que contenga otro objeto anidado. El nivel superior queda bloqueado, pero el objeto anidado todavía puede cambiar.
const user = Object.freeze({
name: 'Ada',
address: { city: 'London' }
});
user.name = 'Grace';
user.address.city = 'Paris';
console.log(user.name);
console.log(user.address.city);Las matrices anidadas también
Las matrices dentro de un objeto congelado tampoco están protegidas. Puede usar push, pop y reasignar sus elementos.
const state = Object.freeze({ tags: ['a', 'b'] });
state.tags.push('c');
state.tags[0] = 'X';
console.log(state.tags);isFrozen lo confirma
El objeto anidado devuelve isFrozen como false, lo que confirma que el congelado no llegó a su interior.
const obj = Object.freeze({ inner: { v: 1 } });
console.log(Object.isFrozen(obj));
console.log(Object.isFrozen(obj.inner));Escribir deepFreeze
Para bloquearlo todo, utilice recursión: congele el objeto y después cada propiedad que contenga un objeto anidado. Esto se denomina congelado profundo.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const value = obj[key];
if (value && typeof value === 'object') {
deepFreeze(value);
}
}
return Object.freeze(obj);
}
const data = deepFreeze({ a: { b: { c: 1 } } });
data.a.b.c = 999;
console.log(data.a.b.c);deepFreeze con matrices
Las matrices también son objetos, por lo que la misma recursión las congela. Así, las operaciones push y las escrituras de elementos quedan bloqueadas en todos los niveles.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const value = obj[key];
if (value && typeof value === 'object') deepFreeze(value);
}
return Object.freeze(obj);
}
const state = deepFreeze({ list: [1, 2, 3] });
state.list.push(4);
state.list[0] = 99;
console.log(state.list);Verificación del congelado profundo
Después del congelado profundo, todos los objetos anidados devuelven isFrozen como true.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const v = obj[key];
if (v && typeof v === 'object') deepFreeze(v);
}
return Object.freeze(obj);
}
const o = deepFreeze({ a: { b: 1 } });
console.log(Object.isFrozen(o));
console.log(Object.isFrozen(o.a));Protección frente a ciclos
Si un objeto se referencia a sí mismo, una recursión ingenua entra en un bucle infinito. Omita los objetos que ya estén congelados para trabajar de forma segura.
function deepFreeze(obj) {
if (Object.isFrozen(obj)) return obj;
for (const key of Object.keys(obj)) {
const v = obj[key];
if (v && typeof v === 'object') deepFreeze(v);
}
return Object.freeze(obj);
}
const a = { name: 'a' };
a.self = a;
deepFreeze(a);
console.log(Object.isFrozen(a.self));Coste del congelado profundo
El congelado profundo recorre cada valor anidado, lo que consume tiempo y memoria en estructuras grandes. Congele únicamente lo que realmente necesite protección, como la configuración compartida o las constantes.
function deepFreeze(obj) {
if (Object.isFrozen(obj)) return obj;
Object.keys(obj).forEach(k => {
const v = obj[k];
if (v && typeof v === 'object') deepFreeze(v);
});
return Object.freeze(obj);
}
const small = deepFreeze({ a: 1, b: { c: 2 } });
console.log('frozen deeply:', Object.isFrozen(small.b));Cuándo es suficiente el congelado superficial
Si un objeto solo contiene valores primitivos, un Object.freeze superficial ya lo protege por completo. El congelado profundo solo es importante cuando hay objetos o matrices anidados.
const flat = Object.freeze({ a: 1, b: 'two', c: true });
flat.a = 100;
console.log(flat.a);
console.log(Object.isFrozen(flat));Por qué importa
Comprender la diferencia entre el congelado superficial y el profundo evita caer en la trampa de pensar que un objeto congelado es completamente inmutable. Para datos anidados, utilice recursión. Como alternativa a la mutación, las próximas lecciones explican patrones de actualización inmutable que copian los datos en lugar de congelarlos.
const config = Object.freeze({ db: { host: 'local' } });
config.db.host = 'changed';
console.log('shallow freeze leaked:', config.db.host);Comprobación rápida
Después de Object.freeze({ a: { b: 1 } }), ¿puede cambiar la b anidada?
Resumen: congelado superficial frente a profundo
Ha aprendido el límite de profundidad del congelado:
Object.freezees superficial; los objetos y matrices anidados siguen siendo mutables.- deepFreeze utiliza recursión para bloquear todos los niveles.
- Proteja el código frente a ciclos omitiendo los objetos que ya estén congelados.
- El congelado profundo tiene un coste, así que congele únicamente lo que necesite protección.
Preguntas frecuentes
¿La lección «Congelación superficial frente a profunda» es gratis?
Sí — el texto completo de «Congelación superficial frente a profunda» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Congelación superficial frente a profunda»?
Comprenda hasta dónde llega la congelación. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Congelación superficial frente a profunda»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Object.freeze y seal
- Congelación superficial frente a profunda
- Patrones de actualización inmutable
- structuredClone para copias profundas