¿Por qué no funcionan las constantes con objetos en JavaScript?

La palabra clave ‘const’ de ECMAScript 2015 generó un cambio significativo en la forma de declarar variables en JavaScript. No obstante, su comportamiento con los objetos puede resultar confuso a primera vista. En este artículo, abordaremos la diferencia entre las constantes y los objetos, explicaremos por qué se pueden modificar las propiedades de los objetos declarados con ‘const’ y mostraremos cómo puedes hacer un objeto inmutable en JavaScript.

Variables, Constantes y Objetos en JavaScript

Antes de adentrarnos en los detalles, es crucial comprender la naturaleza de las variables y constantes en JavaScript. Con la llegada de ES6 (ECMAScript 2015), la forma de trabajar con ellas ha evolucionado. Ahora, tenemos ‘let’ y ‘const’ para definir variables de bloque con un ámbito más controlado, a diferencia de ‘var’, que define variables con un alcance más amplio y menos predecible. Sin embargo, el verdadero quebradero de cabeza surge al trabajar con objetos y la palabra clave ‘const’. Veamos por qué esta última parece no cumplir su promesa de inmutabilidad cuando se trata de objetos.

Comprendiendo ‘const’ con Tipos Primitivos

Empecemos con un ejemplo básico que utiliza ‘const’ con un tipo primitivo como un número:

‘use strict’;

const PI = 3.141516;

// PI = 3.14; // Descomenta esta línea y verás el error:

console.log(PI);

'use strict';
const PI = 3.141516;
// PI = 3.14; // Descomenta esta línea y verás el error:
console.log(PI);

En el fragmento de código anterior, hemos declarado ‘PI’ como una constante y le hemos asignado un valor. Si intentamos reasignar ‘PI’ a un nuevo valor, JavaScript arrojará un error del tipo TypeError, que indica que no podemos asignar a una variable constante. Esto es lo que esperamos de una constante: un valor que no cambie una vez que se establece.

La Paradoja de ‘const’ con Objetos

Pero, ¿qué ocurre cuando utilizamos ‘const’ con objetos? Un ejemplo claro sería:

const empleado = { nombre: ‘Juan’, profesion: ‘Programador’ };

empleado.nombre = ‘Pedro’;

console.log(empleado);

const empleado = { nombre: 'Juan', profesion: 'Programador' };
empleado.nombre = 'Pedro';
console.log(empleado);

Al ejecutar este código, nos encontramos con que el objeto ‘empleado’ sí permite modificar sus propiedades, a pesar de haber sido declarado con ‘const’. Esto parece ir en contra de la definición de una constante, pero si lo analizamos más a fondo, podemos entender el comportamiento de JavaScript en este caso.

Referencia Constante vs. Objeto Inmutable

La clave para desentrañar este misterio radica en diferenciar entre una referencia constante y un objeto inmutable.

‘const’ en JavaScript asegura que la referencia a la memoria no cambie, es decir, el identificador no se puede reasignar a un nuevo valor o dirección de memoria. Así que, cuando declaramos un objeto con ‘const’, aseguramos que la variable siempre apuntará al mismo objeto, pero esto no significa que el contenido del objeto esté protegido contra cambios.

Veamos lo que sucede si intentamos reasignar el objeto ‘empleado’ a un nuevo objeto, lo cual debería ser inválido:

‘use strict’;

const empleado = { nombre: ‘Juan’, profesion: ‘Programador’ };

// empleado = { nombre: ‘Pedro’, profesion: ‘Hacker’ }; // Descomenta esta línea y verás el error:

console.log(empleado);

'use strict';
const empleado = { nombre: 'Juan', profesion: 'Programador' };
// empleado = { nombre: 'Pedro', profesion: 'Hacker' }; // Descomenta esta línea y verás el error:
console.log(empleado);

Este código sí lanzará un TypeError, ya que estamos intentando cambiar la referencia del objeto que la constante ‘empleado’ guarda, lo cual va en contra de la definición de constante en JavaScript.

Inmutabilidad de Objetos con Object.freeze()

Si nuestro objetivo es evitar que las propiedades de un objeto cambien después de su creación, existe una solución prevista en el lenguaje: ‘Object.freeze()’. Este método impide que se modifiquen las propiedades de un objeto y que se añadan o eliminen propiedades. Veamos cómo se utiliza:

'use strict';
var empleado = Object.freeze({ nombre: 'Juan', profesion: 'Programador' });
//empleado.nombre = 'Pedro'; // Descomenta y verás un TypeError
empleado = { nombre: 'Pedro', profesion: 'Hacker' };

En el fragmento de código previo, ‘Object.freeze()’ convierte el objeto ‘empleado’ en inmutable. Si intentamos modificar ‘empleado.nombre’, JavaScript arrojará un TypeError indicando que no podemos asignar a la propiedad de un objeto inmutable. Sin embargo, estamos asignando ‘empleado’ a un nuevo objeto sin ‘const’, por lo que esta última asignación es válida en JavaScript.

Combinando ‘const’ con Object.freeze()

Para obtener tanto una referencia constante como inmutabilidad de propiedades, combinamos ‘const’ con ‘Object.freeze()’. Esto nos da el control total sobre el objeto y previene cualquier tipo de modificación, ya sea de la referencia o de sus propiedades. A continuación, un ejemplo:

'use strict';
const empleado = Object.freeze({ nombre: 'Juan', profesion: 'Programador' });
//empleado.nombre = 'Pedro'; // Descomenta y verás un TypeError
//empleado = { nombre: 'Pedro', profesion: 'Hacker' }; // Descomenta y verás otro TypeError

Al intentar modificar ‘empleado’ de cualquier forma, ya sea cambiando sus propiedades o reasignando el objeto, recibiremos un error. Esto demuestra que ‘const’ y ‘Object.freeze()’ funcionan conjuntamente para garantizar la inmutabilidad completa en JavaScript.

Te puede interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *