Trabajar con información escrita a mano dentro de funciones de JavaScript es una práctica que genera problemas a largo plazo. Cuando los datos cambian, hay que buscar y reemplazar cada referencia manual en el código, lo cual es propenso a errores. La solución está en aplicar el principio de una sola fuente de verdad, extrayendo la información directamente de los objetos que ya existen en el programa.
¿Qué significa tener una sola fuente de verdad en tu código?
Una fuente de verdad única (single source of truth) implica que toda la información que tu programa necesita proviene de un solo lugar: los objetos que ya contienen los datos relevantes. En lugar de escribir valores a mano dentro de cada validación o función, se reutiliza la información almacenada en esos objetos. Esto garantiza que si mañana cambian los personajes, nombres o cualquier dato, el cambio se propaga automáticamente por todo el programa sin intervención manual [01:05].
¿Cómo extraer información de elementos HTML como objetos?
Los inputs del HTML que se crean con JavaScript contienen datos importantes que fueron populados desde los objetos originales. Cada elemento HTML es, en esencia, un objeto que se puede inspeccionar y manipular.
¿Qué revela typeof sobre los elementos del DOM?
Al usar typeof sobre una variable que referencia un elemento HTML, el resultado es "object" [03:05]. Esto confirma que los elementos del DOM son objetos de JavaScript, y por lo tanto se puede acceder a sus propiedades con la notación de punto.
Por ejemplo, si una variable almacena un input de tipo radio que representa una mascota, se puede acceder a su propiedad id de esta forma:
javascript
variable.id
Esto retorna el valor del atributo id, que en este caso corresponde al nombre del objeto original [03:30].
¿Cómo reemplazar datos harcodeados con propiedades dinámicas?
El proceso consiste en identificar las secciones donde hay valores escritos a mano y sustituirlos por la referencia dinámica al objeto. Dentro de la función seleccionarMascotaJugador, la validación original contenía nombres de mascotas escritos directamente en el código. La refactorización reemplaza cada uno de esos valores por elemento.id [04:15]:
javascript
// Antes (harcodeado)
spanMascotaJugador.innerHTML = "Hipodoge";
// Después (fuente de verdad)
spanMascotaJugador.innerHTML = inputSeleccionado.id;
Con este cambio, la función toma el nombre directamente del elemento seleccionado en el DOM, que a su vez fue generado desde el objeto original.
¿Por qué este enfoque mejora la mantenibilidad del proyecto?
Después de guardar los cambios y refrescar el navegador, el comportamiento es idéntico: al seleccionar una mascota, aparece su nombre correctamente [04:50]. La diferencia fundamental es que ahora no existe información duplicada ni escrita a mano en las validaciones.
- Si se agregan nuevos personajes, el código los maneja sin modificaciones adicionales.
- Si se cambian nombres, solo se actualiza el objeto original.
- Se eliminan errores por inconsistencia entre datos manuales y datos reales.
Este patrón de refactorización es esencial en cualquier proyecto de programación. Pasar de valores harcodeados a referencias dinámicas reduce la deuda técnica y hace que el código sea más escalable. La notación de punto para acceder a propiedades como .id es la herramienta clave que permite esta transformación cuando se trabaja con el DOM.
¿Has tenido que refactorizar código con datos escritos a mano en tus proyectos? Comparte tu experiencia y cómo resolviste ese problema.
