Photo by Fatos Bytyqi on Unsplash
Switch vs Object Literal en JavaScript
La instrucción Switch permite evaluar una expresión, buscar su respectiva coincidencia en un caso y ejecutar la declaración asociada. Es muy útil cuando tenemos diferentes casos y la instrucción If pasa a ser inadecuada. Veamos un ejemplo:
// Ejemplo de una instruccion Switch
let num = 2;
switch (num) {
case 1:
console.log('Number ' + num);
break;
case 2:
console.log('Number ' + num);
break;
default:
console.log('default ' + num);
break;
}
Existe una alternativa al Switch como el uso del Object Literal en JavaScript. En algunos escenarios brinda un mayor rendimiento, un código más legible. El Object Literal no es más que una lista separada por comas de pares de nombre y valor dentro de llaves, los valores pueden ser propiedades y funciones. Veamos un ejemplo:
// Ejemplo del uso de Object Literal
let num = 2;
let number = {
1: 'Number 1',
2: 'Number 2',
test () { return 'Test number'},
}
console.log(number[num]);
Ventajas
- Podemos emular la funcionalidad del Switch.
- Aprovechar toda la potencialidad de la sintaxis del estándar ES6.
- Código más legible.
- Evitar la "sintaxis sugar" del Switch.
- Switch es propenso a errores.
- Mejor rendimiento en ejecución sobre declaraciones Switch/If, cuando el número de casos es alto.
Hagamos un ejemplo más ilustrativo:
// Comparemos:
// Switch
const catalogCarByBrandFromSwitch = (brand) => {
switch(brand) {
case('ford'):
return ['Explorer', 'Escape', 'Mustang', 'Move']
break;
case('chevrolet'):
return ['Spark', 'Optra', 'Aveo', 'Cavalier']
break;
case('renault'):
return ['Logan', 'Symbol', 'Clio', 'Megane']
break;
case('toyota'):
return ['Hilux', 'Corolla', 'Camry', 'Prius']
break;
}
};
catalogCarByBrandFromSwitch('ford'); // ["Explorer", "Escape", "Mustang", "Move"]
// Object Literal
const catalogCarByBrandFromObjectLiteral = (brand) => ({
'ford': ['Explorer', 'Escape', 'Mustang', 'Move'],
'chevrolet': ['Spark', 'Optra', 'Aveo', 'Cavalier'],
'renault': ['Logan', 'Symbol', 'Clio', 'Megane'],
'toyota': ['Hilux', 'Corolla', 'Camry', 'Prius']
})[brand];
catalogCarByBrandFromObjectLiteral('ford'); // ["Explorer", "Escape", "Mustang", "Move"]
En Conclusión
La instrucción Switch es usada en muchos lenguajes, al igual que en JavaScript. Su uso en algunos casos puede traer algunas desventajas. En JavaScript se cuenta como alternativa el uso del Object Literal. Esto no quiere decir que el Switch no tenga utilidad. Solo que su implementación no es favorable para todos los escenarios. Ya queda a discreción del programador cuando es de utilidad su uso.
Buy me a coffee