DEV Community

Fernando Barrios - jfergt
Fernando Barrios - jfergt

Posted on • Updated on • Originally published at jfbarrios.com

Reemplazar Switch por Objetos literales en JavaScript

Probablemente más de algunos de ustedes habrán escuchado en repetidas ocaciones que suele ser mejor usar Object Literals en lugar de sentencias switch o inclusive if.

Las sentencias switch, son de las primeras cosas que aprendemos cuando entramos al mundo de la programación, y no, no están obsoletas. Para muchos programadores JavaScript estamos constantemente trabajando con Objetos y muchos de nosotros empezamos a utilizarlos como un reemplazo a una sentencia switch.

¿Qué es una sentencia switch?

Nos permite evaluar una expresión, haciendo coincidir el valor de la expresión con una cláusula de caso y ejecuta las declaraciones asociadas con ese caso, veamos un ejemplo:

function obtenerPrecio(producto) {
  switch (producto) {
    case "Naranjas":
      return 2;
    case "Mangos":
      return 2.5;
    case "Papayas":
      return 3;
    default:
        return 0
  }
}

obtenerPrecio("Papayas"); // Salida: 3
Enter fullscreen mode Exit fullscreen mode

Podemos observar que es similar a sentencias de tipo if-else, con la diferencia que evalúa un único valor.

¿Qué pasa si olvido un break o return?

El inconveniente más común que nos encontramos, es la forma en la que maneja el flujo de control, por ejemplo si nos olvidamos de colocar el 'break' seguirá ejecutando las lineas siguientes de código aún cuando en nuestra lógica no deban de ser ejecutadas, por ende, estamos obligados a añadir estas pausas. En el siguiente ejemplo, si expresión se resuelve a "Platanos", el algoritmo compara el valor con el case "Platanos" y ejecuta la declaración asociada. Cuando se encuentra un break, el programa sale del condicional switch y ejecuta la declaración que lo procede. Si se omite el break, el case "Cerezas" también es ejecutado. Este código lo pueden encontrar acá.

switch (expr) {
  case 'Naranjas':
    console.log('El kilogramo de naranjas cuesta $0.59.');
    break;
  case 'Manzanas':
    console.log('El kilogramo de manzanas cuesta $0.32.');
    break;
  case 'Platanos':
    console.log('El kilogramo de platanos cuesta $0.48.');
    break;
  case 'Cerezas':
    console.log('El kilogramo de cerezas cuesta $3.00.');
    break;
  case 'Mangos':
  case 'Papayas':
    console.log('El kilogramo de mangos y papayas cuesta $2.79.');
    break;
  default:
    console.log('Lo lamentamos, por el momento no disponemos de ' + expr + '.');
}

console.log("¿Hay algo más que te quisiera consultar?");
Enter fullscreen mode Exit fullscreen mode

¿Por qué reemplazarlo por objetos literales?

Como hemos dicho, en JavaScript estamos acostumbrados a utilizar objetos para casi todo, ya sea como constructores o como objetos literales. Nuestros modelos de datos, información o variables suelen ser objetos literales de los cuales extraemos valores de sus propiedades.

const productos = {
    "naranjas": 2,
    "mangos": 2.5,
    "papayas": 3,
    "default": 0
}
function obtenerPrecio(producto) {
  return productos[producto.toLowerCase()] || productos['default'];
}

obtenerPrecio("Papayas"); // Salida: 3
Enter fullscreen mode Exit fullscreen mode

Hemos logrado ahorrarnos algunas líneas de código, pero principalmente hemos conseguido mayor legibilidad y no tenemos que preocuparnos por escribir pausas en el código.

Latest comments (0)