Optimización de Código JavaScript: Variables y Funciones

Uno de los consejos más importantes para la optimización de código, es no repetir el mismo.

Qué significa DRY: ¡no te repitas!

El acrónimo DRY significa “Don’t repeat yourself”, es uno de los principios del buen desarrollo de software que nos recomienda no repetir código fuente que ya hemos escrito.

Repetir código puede generar que, si el día de mañana debemos modificarlo en un lugar, también debamos modificarlo en los otros y si nos olvidamos de esto causará problemas en nuestra aplicación, además del esfuerzo que conlleva tener que realizar todas las modificaciones.

Si tenemos un mismo código fuente en un único punto de nuestra app, será mucho más fácil cambiarlo y también mejoraremos el rendimiento y el peso de los archivos.

Identificando puntos de mejora

A medida que tus habilidades y conocimiento en programación crezca, lograrás identificar con más claridad puntos donde estás repitiendo código y este pueda mejorarse.

Si por ejemplo tienes dos funciones que realizan la misma acción:

sumarNumeros(a, b) {
    return a + b;
}
realizarSumar(a, b) {
    return a + b;
}

Debes eliminar una de ellas, dado que estamos repitiendo código innecesariamente y podemos reutilizar la función en todos los puntos de nuestro código que necesitemos.

Si te encuentras capturando elementos HTML en las funciones del código Javascript:

function iniciarJuego() {
    let botonFuego = document.getElementById('boton-fuego');
    // ...
}
function realizarAtaque() {
    let botonFuego = document.getElementById('boton-fuego');
    // ...
}

Puedes realizar esta captura del elemento una sola vez por fuera de las funciones y utilizarla siempre que necesites:

let botonFuego = document.getElementById('boton-fuego');
function iniciarJuego() {
    // ...
}
function realizarAtaque() {
    // ...
}

La no repetición de código suele estar muy ligado al uso de funciones que poseen la lógica de tu aplicación. Pero también es un concepto que también tienes que aplicar al código CSS. ¿Cómo harías para no repetir clases CSS y poder reutilizarlas cuando las necesites?

Tipos de variables

Habrás observado que cuando declaramos una variable, utilizamos la palabra let por delante. La misma permite que el valor de esa variable cambie con el tiempo a medida que el usuario utiliza el software. Puedes modificar la variable siempre que lo necesites.

En ciertas ocasiones, modificar el valor de una variable puede generar problemas. Por ejemplo, evalúa el siguiente código:

let botonFuego = document.getElementById('boton-fuego');
function iniciarJuego() {
    // ...
}
function realizarAtaque() {
    // ...
}

¿Qué ocurriría si la función iniciarJuego() altera el valor de la variable botonFuego, y posteriormente la función realizarAtaque() intenta utilizar la misma? Posiblemente, la aplicación se rompa y ocurriría algún comportamiento inesperado.

Para evitar que una variable cambie de valor, sabiendo previamente que nunca debe cambiar, puedes usar el tipo de variable const en lugar de let.

const botonFuego = document.getElementById('boton-fuego');
// ...

Las variables “Constantes” no podrán cambiar nunca su valor. Ocurrirá un error si lo intentas.

Con este simple cambio, tu aplicación ya es un poco más segura a evitar errores inesperados por cambios en los valores de las variables que no deberían cambiar. A medida que ganes en conocimiento y experiencia en programación, sabrás cuándo utilizar let o cuándo utilizar const.

Conclusión

No es necesario obsesionarse con no repetir código fuente. A veces es necesario o no puede evitarse. Siempre es recomendable hacer un esfuerzo de escribir código de la forma más escalable y limpia posible y no repetirlo es uno de los principales factores.

Evaluar la repetición de código y el uso correcto de los tipos de variables son dos conceptos que tienes que comenzar a asimilar para convertirte en ese gran desarrollador de software que sueñas.

Son principios que aplican para casi cualquier lenguaje de programación, no solo para Javascript.

---

Contribución creada por: Kevin Fiorentino (Platzi Contributor)