¿Cómo congelar un objeto en JavaScript?

En este artículo, veremos cuál es el problema con los objetos en JavaScript y por qué necesitamos «congelar» un objeto en JavaScript. También aprenderemos cómo «congelar» un objeto en JavaScript.

Problema con el objeto en JavaScript: todos sabemos que los objetos de JavaScript son mutables. ¿Cómo podemos hacerlos inmutables? Defínalos como const , pero si declaramos un objeto JavaScript como const, solo evita que el objeto sea reasignado como un todo. Todavía podemos reasignar las propiedades y cambiar su valor.

Ejemplo 1:

<script>
  const obj1 = { key1: "val1", key2: "val2", key3: "val3" };
  console.log("Before Change");
  console.log(obj1);
  obj1.key1 = "val";
  console.log("After Change");
  console.log(obj1);
</script>

Producción:

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: "val3"
}
"After Change"
{
key1: "val",
 key2: "val2",
 key3: "val3"
}

¿Cómo solucionar el problema anterior?

Podemos usar un método Object.freeze() proporcionado por JavaScript para evitar la adición de nuevas propiedades con la actualización y eliminación de propiedades existentes. 

Ejemplo 2:

const obj1={key1:"val1", key2:"val2", key3:"val3"}
console.log("Before Change")
console.log(obj1);
Object.freeze(obj1);
obj1.key1="val";
console.log("After Change")
console.log(obj1);

Producción:

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

Este no es el mejor enfoque porque solo crea una congelación superficial del objeto y si el objeto tiene algún objeto/array anidado como propiedad, el objeto/array anidado aún se puede modificar.

Ejemplo 3:

<script>
  const obj1 = { key1: "val1", 
                 key2: "val2", 
                 key3: ["val3", "val4", "val5"] 
               };
    
  console.log("Before Change");
  console.log(obj1);
  Object.freeze(obj1);
  obj1.key3[0] = "val";
  obj1.key3[1] = "val";
  obj1.key3[2] = "val";
  console.log("After Change");
  console.log(obj1);
</script>

Salida: Esta es la situación cuando necesitamos crear una congelación profunda para un objeto.

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

¿Cómo implementarlo?

Usaremos la recursividad para implementar la congelación profunda del objeto. La idea es comprobar si cada propiedad es un objeto o no. Si la propiedad es un objeto comprobaremos si está congelado o no. Si no está congelado, llame recursivamente a la función congelar en esa propiedad. De esta forma, crearemos una congelación profunda del objeto.

Ejemplo 4:

<script>
  const obj1 = { key1: "val1", 
                 key2: "val2", 
                 key3: ["val3", "val4", "val5"] 
               };
  
  const deepFreeze = (obj1) => {
    Object.keys(obj1).forEach((property) => {
      if (
        typeof obj1[property] === "object" &&
        !Object.isFrozen(obj1[property])
      )
        deepFreeze(obj1[property]);
    });
    return Object.freeze(obj1);
  };
  deepFreeze(obj1);
  
  console.log("Before Change");
  console.log(obj1);
  obj1.key3[0] = "val";
  obj1.key3[1] = "val";
  obj1.key3[2] = "val";
  console.log("After Change");
  console.log(obj1);
</script>

Producción:

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}