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:
HTML
<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:
Javascript
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:
HTML
<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:
HTML
<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"] }