Refactor JS: Convierte tus switch a objetos.
Ocupan menos líneas y el acceso es más rápido.
Volvemos con la serie Refactor JS.
En la entrega de hoy veremos cómo refactorizar una función con un switch y convertirla en un objeto.
const getMonthShort = (month) => {
let shortMonth; switch (month) {
case 'JANUARY':
shortMonth = 'Jan.';
break; case 'FEBRUARY':
shortMonth = 'Feb.';
break; case 'MARCH':
shortMonth = 'Mar.';
break; default:
shortMonth = 'Jan.';
break;
} return shortMonth;
};console.log(getMonthShort('FEBRUARY'), getMonthShort('aaa'));
// Feb. Jan.
Lo bueno de los switch es que admiten una opción por defecto para los casos que no están definidos. En el ejemplo, todo lo que llegue al switch que no sea 'JANUARY', 'FEBRUARY' o 'MARCH' entrará por el default.
Vamos al lío.
☝️ Lo primero, podríamos darle a shortMonth el valor del case default al declararlo, pero estaríamos perdiendo parte de la potencia del switch al quitar el default o duplicando código.
Lo que sí podemos hacer es return dentro del switch.
Esto nos ahorraría todas las líneas de break, el return final y la declaración de la variable.
const getMonthShort2 = (month) => {
switch (month) {
case 'JANUARY':
return 'Jan.'; case 'FEBRUARY':
return 'Feb.'; case 'MARCH':
return 'Mar.'; default:
return 'Jan.';
}
};console.log(getMonthShort2('FEBRUARY'), getMonthShort2('aaa'));
// Feb. Jan.
Nos hemos quitado una buena parte del código, ¿no? Pero aun podemos seguir recortando.
✌️ Lo segundo, si el default va a devolver el valor de uno de los casos, podemos unificarlos. Si no hacemos return o break dentro de un caso, pasará al siguiente y se ejecutará su código.
Vamos a beneficiarnos de eso.
const getMonthShort3 = (month) => {
switch (month) {
default:
case 'JANUARY':
return 'Jan.'; case 'FEBRUARY':
return 'Feb.'; case 'MARCH':
return 'Mar.';
}
};console.log(getMonthShort3('FEBRUARY'), getMonthShort3('aaa'));
// Feb. Jan.
La posición del default no importa dentro del switch.
Una línea menos. Pero podemos hacerlo mejor.
Nos acercamos al objetivo de este capítulo de Refactor JS.
👌 Creamos un objeto con casos y resultados para acceder directamente a ellos. Para mí, esta es la opción más limpia y rápida.
const months = {
JANUARY: 'Jan.',
FEBRUARY: 'Feb.',
MARCH: 'Mar.',
};const getMonthShort4 = (month) => (months[month] || months.JANUARY);console.log(getMonthShort4('FEBRUARY'), getMonthShort4('aaa'));
// Feb. Jan.
Con un objeto reducimos el número de líneas al máximo y añadiendo el OR en el return de la función getMonthShort4 simulamos el caso default del switch.
Yo hace tiempo que me pasé a los objetos y no uso los switch.
¡Por limpieza, claridad y número de líneas!
Recuerda
Refactorizar es satisfactorio.
Hacer una pull request con más líneas eliminadas que añadidas no tiene precio. 😍
Pero tampoco hay que pasarse. Mejor no poner nombres de variables de una letra ni intentar que cada función ocupe una línea. Siempre es preferible que el código lo entienda cualquier persona y pueda modificarlo sin dedicarle una tarde a estudiarlo.
