Refactorizar funciones en JavaScript para eliminar valores hardcodeados y reemplazarlos por una sola fuente de verdad es una práctica que mejora la mantenibilidad de tu código. Aprenderás a extraer información directamente desde elementos HTML usando propiedades de objetos, evitando errores futuros cuando cambien los datos del programa.
¿Qué significa tener una sola fuente de verdad en tu código?
Cuando trabajas con datos repetidos en varias funciones, escribirlos a mano en cada validación crea un problema: si mañana cambias un nombre o valor, tienes que buscar y reemplazar en todos lados. La idea es que una variable concentre la información y todo el programa la consuma desde ahí.
¿Qué es una sola fuente de verdad? Es una variable u objeto del que tu programa extrae información repetidamente, evitando duplicar datos hardcodeados en distintas funciones.
En el ejercicio del juego de mascotas, la función seleccionarMascotaJugador tenía nombres escritos manualmente dentro de las validaciones. El objetivo es reemplazarlos por datos que ya viven en los objetos creados previamente.
¿Cómo extraer datos desde un elemento HTML con JavaScript?
Los inputs del formulario están ligados a elementos HTML generados dinámicamente con JavaScript, y cada uno guarda información importante de los objetos originales. Eso significa que puedes leer esos elementos para obtener los datos que necesitas.
Si imprimes en consola la variable que referencia un input, recibes el elemento HTML completo con sus atributos, incluyendo el id. Y aquí viene lo interesante: ese id contiene el nombre que asignaste desde la propiedad del objeto.
¿Cómo confirmar el tipo de dato con typeof?
Usando el operador typeof sobre la variable del input, el navegador responde que es de tipo object. Esto te da la pista clave: puedes acceder a sus propiedades igual que con cualquier objeto en JavaScript.
javascript
typeof inputMascota; // "object"
inputMascota.id; // "Hipodoge"
Al llamar .id sobre el elemento, obtienes el valor que originalmente venía del nombre del objeto. Ese valor es justo lo que necesitas para reemplazar el texto escrito a mano.
¿Cómo refactorizar la función seleccionarMascotaJugador?
Dentro de la validación que comprueba si un radio button fue chequeado, la versión original asignaba el nombre con texto literal. La refactorización consiste en sustituir ese texto por la propiedad .id del elemento.
Los pasos concretos son:
- Identificar la variable que apunta al input chequeado.
- Borrar el string hardcodeado dentro de la asignación.
- Reemplazarlo por
variableInput.id para extraer el nombre dinámicamente.
- Repetir el patrón en cada bloque de validación de la función.
javascript
if (inputHipodoge.checked) {
mascotaJugador = inputHipodoge.id;
}
¿Por qué usar .id en lugar del nombre escrito a mano? Porque el id se generó desde la propiedad nombre del objeto, así garantizas que cualquier cambio futuro en el objeto se refleje automáticamente en la lógica del juego.
Al recargar el navegador y seleccionar una mascota, el programa muestra el nombre correcto. Pero ahora con una ventaja: si modificas los personajes en el archivo de objetos, no necesitas tocar las validaciones de JavaScript.
¿Qué ganas al eliminar los valores hardcodeados?
La diferencia se nota cuando el proyecto crece. Mantener nombres repetidos en varias funciones obliga a recordar cada lugar donde aparecen, y olvidar uno solo rompe la lógica.
Las ventajas concretas de esta práctica son:
- Cambios dinámicos: actualizar el objeto basta para propagar el cambio a todo el programa.
- Menos errores humanos: evitas inconsistencias de tipeo entre validaciones.
- Código más limpio: las funciones quedan desacopladas de datos específicos.
- Escalabilidad: agregar nuevos personajes no requiere reescribir validaciones.
Esta lógica se aplica también a la función que selecciona la mascota del enemigo, donde el mismo principio te ahorra duplicar trabajo. ¿Has detectado en tu propio código zonas con datos hardcodeados que podrías centralizar? Cuéntame en los comentarios cómo lo resolverías.
