El condicional switch - JavaScript - Curso desde cero - Capítulo 20

El condicional switch en JavaScript

El condicional switch evalúa una expresión o condición que es comparada en múltiples declaraciones.

Cada una de estas declaraciones se separa con la palabra reservada case.
El condicional switch funciona de forma similar al else if.

Sintaxis del condicional switch

<script> 
    
switch(expresión) {
  case 1:
    // código a ejecutar.
    break;
  case 2:
    // código a ejecutar.
    break;
  default:
    // código a ejecutar.
}

</script>

Ejemplo práctico del condicional switch

Voy a crear un pequeño script como si fuera para un videojuego.  En él se pregunta al usuario qué tipo de elemento quiere y le muestra lo que hay en el inventario.

<script> 
    
var opcion;
 
opcion = prompt("Introduce una de estas opciones: armaduras, armas, pociones.");
 
switch (opcion) {
  case "armaduras":
    opcion = "En el inventario hay cascos, petos y botas";
    break;
  case "armas":
    opcion = "En el inventario hay espadas, cuchillos y mazas.";
    break;
  case "pociones":
    opcion = "En el inventario hay pociones sanadoras, de maná y de fuerza.";
    break;
 default:
  alert("No introdujiste la opción correcta");
}
 
alert (opcion);

</script>

Explicación

Se declara una variable llamada opcion la cual gracias al método prompt almacenará el valor introducido por el usuario.

Después de esto, empieza el método switch. En él se establece como parámetro la variable opcion (switch (opcion)), de este modo, ejecutará el código dentro del case que coincida con lo introducido por el usuario.

Si el usuario introdujo armaduras, se ejecutará el case "armaduras", si introdujo armas, se ejecuta el case "armas" y así sucesivamente.

En caso de que el usuario no introduzca ninguna de las tres opciones (armaduras, armas o pociones) se ejecutará el código del default.

Finalmente, este resultado es mostrado al usuario mediante el alert de la última línea del código.

Resultado

Se muestra el prompt:

case "armaduras".

case "armas".

case "pociones".

default.

Intruzco una opción no contemplada en el switch y esto es lo que ocurre:

La importancia del break del condicional switch.

Es importante que sepas para que se escribe un break después del código de cada case. Esto se hace para que se rompa la ejecución del switch y salga de él en cuanto se haya ejecutado la opción deseada, si no lo haces así, empezará a ejecutar todo el código que venga después del que quieres ejecutar. Por ejemplo, si introduces armaduras, también te mostrará el inventario de armas y pociones. 
Te invito a que hagas la prueba en tu navegador y veas con tus propios ojos lo que ocurre.