Refactor JS: if-else que devuelve un booleano

Convierte condiciones if-else a una línea.

Jorge Cáster
4 min readFeb 25, 2021

Refactorizar es satisfactorio.

Muchas veces nos vemos obligados a subir código duplicado, sin revisar o sin haber pensado lo suficiente. El tiempo es nuestro enemigo y las prisas no son buenas.

Quiero empezar una serie de artículos de refactorización: cómo y cuándo refactorizar, encontrar el equilibrio entre pros y contras, y saber reconocer errores habituales.

Uno de los ejemplos más claros de refactorización es un if-else que devuelve true o false, dependiendo de su condición.

const isAvailable = (calendar, day) => {
let availability;
if (calendar[day].available === true) {
availability = true;
} else {
availability = false;
}
return availability;
};

Si tienes experiencia programando seguramente ya hayas encontrado una o varias mejoras a simple vista.

☝️ Lo primero, podríamos ahorrarnos el else si inicializamos la variable availability a false.

✌️ Lo segundo, si un valor lo comparamos con tres iguales a true significa que esperamos un booleano y podríamos obviar la comparación ( === true ).

Refactor 1 y 2: Inicializar la variable para quitar el else y no comparar booleanos con triple igual (===).
Refactor 3: Hacemos return dentro del if.
Refactor 3: Hacemos return dentro del if.

👌 Ahora podríamos poner el if lo primero y devolver true si se cumple la condición. Al final devolvemos false. Este es un recurso habitual en funciones que devuelven diferentes valores según sus condiciones.

Al hacer return true salimos de la función y no se lanzaría return false. Además, nos ahorramos declarar la variable.

🖖 Esta estructura podría llevarnos a pensar en un ternario. Muchos if-else se pueden reducir a un ternario, pero aun así esta no es la mejor solución.

🖐 Lo más interesante de los if-else que devuelven un booleano es que podemos hacer directamente return de la condición del if.

Y, si nos aprovechamos del return implícito de las funciones flecha, nuestro método se quedaría en una sola línea (consiguiendo un famoso one-liner de los que la gente tanto presume).

const isAvailable = (calendar, day) => calendar[day].available;

💡 Pongo el código en texto para que puedas copiar tanto el original al principio del artículo como el resultado aquí.

Otros usos

Hemos refactorizado una función entera, pero lo mismo podría hacerse para un if-else en medio de nuestro código. Seguro que encontramos muchos que podrían dejarse en un ternario o una línea.

Usamos la condición del if para darle valor a nuestra variable.
Usamos la condición del if para darle valor a nuestra variable.

Resumiendo

A veces, por ir a toda prisa, no nos paramos a pensar en cómo mejorar nuestro código. Antes de hacer commit deberíamos dedicarle unos minutos a repasar nuestro cambios y pensar si se pueden reducir de alguna manera.

No hay que poner nombres de variables de una letra ni intentar que cada función ocupe una línea. Siempre es mejor que el código lo entienda cualquier persona que llegue a él y pueda modificarlo sin dedicarle una tarde a estudiarlo.

Muchas veces, si quitamos el piloto automático, podremos reducir nuestro código considerablemente.

La satisfacción de hacer una pull request con más líneas eliminadas que añadidas no tiene precio. 😍

👋 👋 ¡Gracias por leer hasta aquí y hasta la próxima! 👋 👋

--

--

Jorge Cáster

Futurist & Tech Lover | Lead Front End Engineer @Mercedes-Benz