Mutabilidad de objetos en JavaScript [Ejemplo práctico]

En el camino de aprendizaje del desarrollo web, no hay atajos ni caminos rectos, sino más bien un sendero lleno de conceptos intrigantes. Uno de ellos es la mutabilidad de objetos en JavaScript, un tema que puede sonar un poco abstracto al principio, pero que tiene un impacto significativo en cómo trabajamos con datos en este lenguaje. Si eres un aspirante a desarrollador web que busca desentrañar los misterios detrás de los objetos mutables e inmutables, ¡has llegado al artículo correcto!

Mutabilidad de objetos en JavaScript: objetos mutables e inmutables

Objetos mutables

Para entender la mutabilidad de objetos en JavaScript, primero imagina que estás trabajando en una obra de arte y, cada vez que deseas realizar un cambio, tomas una pincelada y lo modificas directamente en el lienzo. Los objetos mutables en JavaScript son un poco como ese lienzo. Puedes alterar sus propiedades en el lugar sin necesidad de crear una nueva instancia. Esto puede ser conveniente, pero también puede traer algunos desafíos inesperados. Si, por ejemplo, estás trabajando con una estructura de datos compleja y realizas cambios en una parte del objeto, esos cambios pueden reflejarse en otras partes del código, creando un caos difícil de rastrear.

Objetos inmutables

Ahora, considera que, en lugar de modificar directamente el lienzo, decides hacer una nueva copia del lienzo cada vez que quieras realizar un cambio. Los objetos inmutables siguen esta filosofía. En JavaScript, cuando deseas modificar un objeto inmutable, creas un nuevo objeto en lugar de cambiar el existente. Esto puede parecer menos eficiente, pero en realidad tiene ventajas sorprendentes. Al tener nuevos objetos en cada cambio, puedes evitar efectos secundarios no deseados y construir programas más predecibles y fáciles de entender.

Ejemplo práctico de mutabilidad de objetos en JavaScript

Para realizar este ejemplo práctico y que entiendas cómo funciona la mutabilidad de objetos en JavaScript, imagina que estás trabajando en una aplicación de gestión de tareas. Tienes un objeto que almacena la información de una tarea y quieres crear una nueva instancia de esta tarea con algunas actualizaciones. Vamos a ver cómo se manejan los objetos mutables e inmutables en este escenario.

// Creamos un objeto de tarea 
const tareaOriginal = { 
id: 1, 
descripcion: "Completar el informe", 
completada: false, 
}; 
// Creamos una nueva instancia de tarea usando Object.assign()
const nuevaTarea = Object.assign({}, tareaOriginal, { completada: true }); 
// Intentamos cambiar la descripción de la tarea original tareaOriginal.descripcion = "Revisar el informe";

En este ejemplo, hemos utilizado Object.assign() para crear una nueva instancia de la tarea con la propiedad completada actualizada. Sin embargo, hemos encontrado un problema cuando intentamos cambiar la descripción de la tarea original: el cambio también se refleja en la nueva tarea. Esto es porque Object.assign() copia las referencias de las propiedades internas, lo que hace que ambas tareas compartan las mismas propiedades modificables.

Para evitar este problema, podemos usar Object.freeze() para hacer que el objeto sea inmutable:

// Creamos un objeto de tarea 
const tareaOriginal = { 
id: 1, descripcion: "Completar el informe", 
completada: false, 
}; 
// Congelamos el objeto original para hacerlo inmutable 
const tareaInmutable = Object.freeze(tareaOriginal); 
// Intentamos cambiar la descripción de la tarea original tareaOriginal.descripcion = "Revisar el informe"; // Esto no causará cambios en tareaInmutable

En definitiva, entender la mutabilidad de objetos en JavaScript es muy importante si, como desarrollador, quieres crear nuevas instancias o construir programas más predecibles.

¡Aprendizaje y transformación con KeepCoding!

En el vasto mundo del desarrollo web, comprender los conceptos como la mutabilidad de objetos en JavaScript es un paso crucial para convertirse en un programador hábil y seguro. Si estás listo para emprender un viaje de aprendizaje transformador, KeepCoding está aquí para ayudarte. Nuestro Desarrollo Web Full Stack Bootcamp te proporcionará no solo el conocimiento técnico que necesitas, sino también el poder de transformar tu vida.

Imagina adquirir las habilidades para crear aplicaciones web de principio a fin, manejar bases de datos, diseñar interfaces atractivas y más. ¿Listo para darle un giro a tu carrera? Únete al bootcamp y cambia tu vida mientras dominas el emocionante mundo del desarrollo web.