La instrucción switch en JavaScript nos permite tomar decisiones a partir de una lista de posibles valores que se compraran con una variable. Por ejemplo, si tenemos una variable "x" y queremos realizar una acción en función del valor que tenga ésta, escribiremos esto:

switch (x) {
   case 0:
      //Acción para el 0
      break;
   case 1:
      //Acción para el 1
      break;
   case 2:
      //Acción para el 2
      break;
    ........
   default:
      //Acción por defecto
}

SwitchEsta instrucción de control de flujo nos evita tener que crear multitud de condicionales if-then anidados para conseguir el mismo efecto. Así, podemos poner cada uno de los valores posibles y realizar las acciones pertinentes en cada caso. Hasta aquí lo que todo el mundo conoce.

Al igual que en otros muchos lenguajes (incluyendo C#, C++ o Java) esta estructura es bastante limitada, en el sentido de que no nos deja comprobar condiciones mas elaboradas. Por ejemplo, no podemos:

  • Comprobar varios casos separándolos por comas: case 0, 1, 2, 3:  Tendríamos que usar varios case separados en varias líneas, sin usar el break al final.
  • Comprobar condiciones complejas basadas en rangos y operadores. Por ejemplo, esto no es válido: case x>0 && x<10: para que se ejecute un código con cualquier número entre 0 y 10.

Ante estas limitaciones, sobre todo la segunda, a veces la instrucción se convierte en algo bastante limitado y debemos rechazar su uso.

Sin embargo existe un truco poco conocido que es realmente útil y nos permite crear instrucciones switch mucho más complejas. Se trata de comprobar un valor booleano en lugar de comprobar directamente el valor de la variable o expresión que queremos comprobar. Es anti-intuitivo pero funciona bien.

Por ejemplo, supongamos que queremos ejecutar acciones diferentes en función de que nuestra variable "x" esté entre 0 y 10, entre 10 y 20, sea menor que 0 o mayor que 100, y el resto de los posibles casos. Con una instrucción switch normal no es posible, pero si la sustituimos por esto:

switch (true) {
    case x > 0 && x < 10:
        alert("x > 0 && x < 10");
        break;
    case x > 0 && x < 20:
        alert("x > 0 && x < 20");
        break;
    case x < 0 || x > 100:
        alert("x < 0 || x > 10");
        break;
    default:
        alert("Ninguno");
}

¡Podremos conseguir exactamente lo que necesitamos!

Fíjate en lo que hemos hecho. En lugar de comprobar el valor de "x" comprobamos true. Esto hará que salte la coincidencia cuando alguna de las condiciones del case sea verdadera, saltándose las demás. En la práctica estamos consiguiendo lo que buscábamos, algo que a priori era imposible.

Ten en cuenta que:

  1. Las condiciones pueden ser lo complejas que queramos mientras devuelvan un booleano o un valor verdadoso/falsoso.
  2. Debemos tener cuidado de poner, o bien muchas condiciones que sean mutuamente excluyentes, o bien colocarlas en el orden más apropiado en el que queramos detectarlas. Si no lo hacemos así pueden saltarnos casos de manera inesperada.
  3. Es importante que pongamos siempre el break al final de cada caso, o saltarán todos los siguientes al primero que se detecte. Esto no es algo que queramos normalmente, aunque quizá haya casos en los que pueda sernos útil.

Ya se sabe que siempre hay trucos para saltarse los límites, y este es muy útil y poco conocido ;-)

¡Espero que te sea  útil!

Para saber más: JavaScript profesional para desarrolladores y diseñadores web

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA