Cuando trabajas con funciones en JavaScript que comparten variables, repetir el código es uno de los errores más comunes y costosos. Aquí aprenderás cómo refactorizar funciones para eliminar duplicaciones, mover variables a un alcance superior y diferenciar cuándo usar let o const dentro de un proyecto real: un juego web tipo Pokémon.
La idea central es simple: si una variable apunta a un elemento HTML que vas a usar en varias funciones, no la declares dos veces. Sácala del cuerpo de la función y conviértela en una referencia global que cualquier función pueda consumir.
¿Por qué evitar repetir código en JavaScript?
Repetir declaraciones genera errores y le quita rendimiento a tu aplicación. Cuando declaras dos veces la misma variable con let o const, el navegador te lanza un error del tipo "variable has already been declared" y rompe el flujo del juego.
¿Qué pasa si declaro la misma variable dos veces en JavaScript? El motor lanza un error de redeclaración y detiene la ejecución. Solo puedes tener una declaración por nombre dentro del mismo scope.
En el ejercicio del juego, varias funciones llamaban a los mismos botones: botonFuego, botonAgua, botonTierra y botonReiniciar. Cada función los volvía a declarar, lo que duplicaba trabajo y abría la puerta a inconsistencias [3:50].
¿Cómo refactorizar variables fuera de las funciones?
El proceso consiste en identificar qué variables apuntan a elementos del DOM mediante getElementById y moverlas al inicio del archivo, fuera de cualquier función. Así quedan disponibles para todo el código.
Un truco práctico de Visual Studio Code: mantén presionada la tecla Alt mientras haces clic en distintas líneas para seleccionar varias a la vez. Esto agiliza mucho el corte y pegado masivo de variables [2:30].
Otro tip de productividad es activar Word Wrap en el menú View. Con eso evitas el scroll horizontal cuando una línea de código es muy larga y puedes leer todo a lo ancho de la pantalla [1:35].
¿Cómo pruebo que mi refactor no rompe nada?
Guarda el archivo, refresca el navegador y juega una partida completa. Si todo responde igual que antes, tu refactor fue exitoso.
Cuando algo falla, abre el inspector de elementos del navegador y ve a la pestaña Console. Ahí verás el error exacto y la línea donde ocurre. En el ejercicio, la consola marcaba la línea 25 con mensajes como "resultado has already been declared", indicando justo qué variable estaba duplicada [9:00].
¿Qué variables debo dejar dentro de la función?
No todas las variables deben salir. Las que se quedan adentro son las que:
- Reciben el resultado de otra función, como un número aleatorio.
- Se construyen dinámicamente dentro de esa función, como elementos
<p> creados al vuelo.
- Tienen un propósito exclusivo de esa función y no se reutilizan en otras.
Las que sí deben salir son las que apuntan a elementos del HTML por su id, ya que esos nodos existen una sola vez en el documento.
¿Cuál es la diferencia entre let y const en JavaScript?
Aquí entra la segunda gran optimización. JavaScript te ofrece dos formas modernas de declarar variables y elegir bien entre ellas hace tu código más predecible.
¿Qué es const en JavaScript? Es una declaración para valores que no cambian. Una vez asignado, el valor permanece fijo durante todo el ciclo de vida del programa.
¿Cuándo uso let en lugar de const? Cuando el valor sí va a cambiar. Por ejemplo, un contador, las vidas de un jugador o un puntaje que se actualiza durante el juego.
En el refactor, todas las referencias a botones, secciones y contenedores HTML pasaron de let a const, porque esos nodos del DOM no cambian su referencia [12:40]. En cambio, variables como el ataque del jugador o las vidas del enemigo se quedaron como let, porque su valor evoluciona durante la partida.
¿Cómo decido entre let y const en la práctica?
Usa esta guía rápida basada en el comportamiento del valor:
- const para elementos del DOM seleccionados con
getElementById o querySelector.
- const para textos fijos como el título del juego o configuraciones que no se modifican.
- let para contadores, puntajes, vidas y cualquier valor que cambie por interacción del usuario.
- let para variables que se declaran sin valor inicial y se asignan después.
¿Qué buenas prácticas seguir al organizar variables globales?
Cuando muevas muchas variables al inicio del archivo, agrúpalas dejando un espacio en blanco entre los bloques que vienen de cada función. Así, si necesitas ubicar una variable específica, la encuentras rápido sin perderte en una pared de código.
Limpia los espacios vacíos que dejan las funciones tras el corte. Esos huecos no afectan la lógica, pero ensucian el archivo y le restan claridad cuando regresas semanas después.
Y recuerda que en programación no existe una única solución correcta. Si tu refactor funciona y es legible, está bien hecho. Compara tu enfoque con otros, pero no asumas que el tuyo es inferior solo porque es distinto.
¿Tu refactor quedó parecido al del ejercicio o encontraste un camino diferente? Déjalo en los comentarios para comparar enfoques.
