El condicional switch - Curso de JavaScript de cero a máster - Capítulo 21


El condicional if else es muy útil cuando nuestras condiciones son pocas y necesitamos poner trozos de código considerables. En cambio, hay veces en las que queremos poner muchas condiciones y poco código. En estas situaciones suele ser mejor el condicional switch que veremos a continuación.

El condicional switch en pseudocódigo tiene un aspecto como esto:

switch (expresión) {
  case condición 1:
    bloque de código a ejecutar
    break;

  case condición 2:
    bloque de código a ejecutar
    break;

  case ... todas las condiciones que quieras

  default:
    bloque de código por defecto si no hay coincidencias con ningún case.
}
Palabra del lenguaje nº 35 encontrada.
El condicional switch evalúa una expresión comparando el valor de la misma con instancias case. En caso de devolver false, utiliza un bloque default.

Como en el if else, podemos tener varias opciones verdaderas (case) y una falsa (default).

Este pseudocódigo quiere decir que tenemos una condición o expresión inicial, de esta dependen todos los case y el default que escribamos. Veamos un ejemplo con código real.

let estacion = prompt("Escribe una estación en minúsculas.");

  switch (estacion){
    case "invierno":
      alert("Todo es frío.");
      break;

    case "primavera":
      alert("Se colorea el mundo.");
      break;

    case "verano":
      alert("Las noches se hacen largas.");
      break;

    case "otoño":
      alert("Donde había color ya no queda nada.");
      break;

    default:
      alert("Eso no es una estación.");
      break;
}
Palabra del lenguaje nº 36 encontrada.
case son cada uno de los posibles bloques que se ejecutarán en caso de que alguno coincida con la expresión del switch.

Lo que puedes ver en el siguiente ejemplo es un prompt() que almacena un valor introducido. Este valor es el que se le pasa al switch en su declaración con switch (estacion). A partir de aquí, se van añadiendo condiciones especificadas en cada case del switch. Por ejemplo case "invierno". Esto significa que si el valor de la variable estacion es invierno literalmente, se va a ejecutar la condición de dicho case. Es lo mismo que un if cuando se cumple su condición en true.

Palabra del lenguaje nº 37 encontrada.
default es un bloque de código que se ejecutará en caso de que ningún case coincida con la expresión del switch. Es como el else del if else.

Cada case debe terminar con un break, ya que esto hace que una vez se ejecute un case, no se evalúen el resto, le decimos, ejecuta "x" en caso de que sea true y una vez termines salta todo lo demás del switch, con lo que continua con la línea inmediata al terminar dicho switch.

Al igual que ocurre con el else, si no se cumple ninguno de los case, se ejecuta el default, que es un equivalente al else. Este no requiere de break ya que se escribe al final del switch. Si lo prefieres, lo puedes escribir sin problemas.

Resultado en el navegador

Voy a probar de ejecutar uno de los case. Te recomiendo que pruebes con el resto con tu navegador.

El condicional switch javascript

En este caso, si le doy a aceptar la condición del case "verano" se cumple (true) y se ejecuta su código.

El condicional switch javascript

En cambio, si escribo cualquier cosa que no se especifique en ningún case, el resultado es que da false y se ejecuta el default.

El condicional switch javascript default

¿Qué pasa si se omite el break entre los case?

Palabra del lenguaje nº 38 encontrada.
break rompe la ejecución del condicional switch evitando que se ejecuten bloques que no deberían.

Lo que ocurre si se omite el poner un break, es que si se ejecuta un case sin él, va a ejecutar seguidamente el siguiente case, aunque no sea true. Si el siguiente case o default que se encuentre tampoco lleva un break, ejecutará el siguiente y así sucesivamente. Mira lo que ocurre si quito los break:

let estacion = prompt("Escribe una estación en minúsculas.");

switch (estacion){
  case "invierno":
    alert("Todo es frío.");

  case "primavera":
    alert("Se colorea el mundo.");

  case "verano":
    alert("Las noches se hacen largas.");

  case "otoño":
    alert("Donde había color ya no queda nada.");

  default:
    alert("Eso no es una estación.");
}

Resultado en el navegador

Ejecuto el primer case introduciendo invierno en el prompt. Se desencadena esto:

El condicional switch javascript break
El condicional switch javascript
El condicional switch javascript break
El condicional switch javascript break
El condicional switch javascript break

Ya sabes, si un switch te falla, suele ser por este motivo.

Comparación switch vs if else de JavaScript

Con el tiempo irás aprendiendo a decidir en qué momento te viene mejor utilizar switch y en cual te viene mejor if else. Solo quiero que de momento comprendas el funcionamiento de ambos. Creo necesario, que veas como quedaría el mismo ejemplo del switch de este capítulo escrito con un if else.

let estacion = prompt("Escribe una estación en minúsculas.");

  if (estacion == "invierno"){
    alert("Todo es frío.");
  }

  else if (estacion == "primavera"){
    alert("Se colorea el mundo.");
  }

  else if (estacion == "verano"){
    alert("Las noches se hacen largas.");
  }

  else if (estacion == "otoño"){
    alert("Donde había color ya no queda nada.");
  }

  else {
    alert("Eso no es una estación.");
  }

Cómo puedes comprobar aquí, el número de líneas escritas no es significativo, prácticamente son iguales. Aquí la gran diferencia reside en la forma en que se escriben las condiciones. En el switch nos basta con escribir una vez la expresión, en este caso “estacion” y luego, en cada case, lo que queremos comparar a esa expresión, sin tener que indicar cada vez la expresión a comparar.
En cambio, en el if else tenemos que indicar la expresión, en este caso estación y seguido la comparación, por eso, en este caso es bastante más cómodo escribir este tipo de condiciones con un switch, pero esto ya es elección de cada persona, al final escribelo con el que te vaya mejor y que creas que es el más adecuado en cada momento.
Esto son solo 5 condiciones, pero y si tuvieras que hacer esto mismo, con una condición para cada día del mes o del año?


Ejercicios de JavaScript

  1. Crea un condicional switch con los días de la semana (lunes a domingo). En cada día, debes poner una frase que se muestre en un alert.
    Pon un prompt para que puedas introducir el día que quieras desde el navegador. En caso de que se escriba cualquier otra cosa, deberá estar contemplado con un alert() que te avise que no es correcto o cualquier cosa por el estilo.

La solución la encontrarás aquí: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.