Condiciones con Switch

Cuando tienes que comparar el mismo valor con cinco opciones distintas, una cadena de else if se hace eterna. Para esos casos JavaScript tiene switch: una estructura de control que ejecuta un bloque de código u otro según el valor de una expresión.

Piensa en una máquina expendedora: pulsas un número y te cae un producto distinto. Un único valor y muchos resultados posibles.

Sintaxis#

switch evalúa una expresión y compara su valor con cada uno de los casos que has definido. Cuando encuentra una coincidencia, ejecuta el código de ese caso. Al final de cada uno ponemos un break para salir del switch y que no se siga ejecutando el código de los casos siguientes.

switch (expresión) {  case valor1:    // código a ejecutar si la expresión coincide con valor1    break  case valor2:    // código a ejecutar si la expresión coincide con valor2    break  default:    // código a ejecutar si la expresión no coincide con ningún valor    break}

Vamos con algo real. Queremos mostrar un mensaje distinto según el día de la semana:

const dia = 'lunes'switch (dia) {  case 'lunes':    console.log('¡Hoy es lunes! 😢')    break  default:    console.log('No es lunes, YAY! 🚀')    break}

Como dia vale 'lunes', coincide con el primer caso y verás el mensaje triste. Con cualquier otro valor, se ejecutaría el default.

Hagámoslo más interesante: que el día no lo escribamos nosotros, sino que sea el de hoy. En JavaScript puedes obtener la fecha y la hora con el objeto Date, que tiene un método llamado getDay(). Te devuelve el día de la semana como un número, donde 0 es domingo y 6 es sábado.

Ahora cada case compara con un número:

const dia = new Date().getDay()// según el día de la semana, mostramos un mensaje diferenteswitch (dia) {  case 0:    console.log('¡Hoy es domingo! 😴')    break  case 1:    console.log('¡Nooo, es lunes! 😢')    break  case 2:    console.log('¡Hoy es martes! 🥵')    break  case 3:    console.log('¡Hoy es miércoles! 🤓')    break  default:    console.log('¡Se acerca el fin de semana! 🚀')    break}

De domingo a miércoles tienes un mensaje propio. El resto de días caen en el default.

switch vs if#

Seguro que ya lo estás pensando: «esto lo podría hacer con un if». Y tienes razón. Este es el ejemplo anterior, reescrito:

const dia = new Date().getDay()if (dia === 0) {  console.log('¡Hoy es domingo! 😴')} else if (dia === 1) {  console.log('¡Nooo, es lunes! 😢')} else if (dia === 2) {  console.log('¡Hoy es martes! 🥵')} else if (dia === 3) {  console.log('¡Hoy es miércoles! 🤓')} else {  console.log('¡Se acerca el fin de semana! 🚀')}

Los dos hacen exactamente lo mismo. A veces se lee mejor con switch y otras con if: depende de ti. Más adelante en el curso veremos alternativas a switch usando algunas estructuras de datos.

Agrupando cases#

A veces varios casos tienen que ejecutar el mismo código. En lugar de copiarlo y pegarlo, puedes apilar los case uno debajo de otro y escribir el código una sola vez:

const dia = new Date().getDay()switch (dia) {  case 0:  case 6:    console.log('¡Hoy es fin de semana! 🥳')    break  case 1:  case 2:  case 3:  case 4:    console.log('¡Nooo, a trabajar! 😢')    break  case 5:    console.log('¡Hoy es viernes! 🤓')    break}

Tanto el 0 como el 6 acaban en el mismo mensaje. Y fíjate en que aquí no hay default: como te decía antes, es opcional y no tienes por qué usarlo siempre.

¡No olvides el break!#

Este es el error más típico con switch. Si no pones el break al final de un caso, JavaScript no se detiene: sigue ejecutando el código de todos los casos que vienen después, coincidan o no.

Mira qué pasa en este código, que está mal a propósito:

// ❌ Este código no es correcto// Lo muestro para que veas qué pasa// si no pones break en tus casosconst dia = new Date().getDay()switch (dia) {  case 0:    console.log('¡Hoy es domingo! 😴')  case 1:    console.log('¡Nooo, es lunes! 😢')  case 2:    console.log('¡Hoy es martes! 🥵')  case 3:    console.log('¡Hoy es miércoles! 🤓')  default:    console.log('¡Se acerca el fin de semana! 🚀')}

Si hoy es martes (2), JavaScript entra por el case 2 y ya no hay ningún break que lo frene. El resultado en consola sería:

¡Hoy es martes! 🥵¡Hoy es miércoles! 🤓¡Se acerca el fin de semana! 🚀

El patrón switch(true)#

Hay un truco que verás de vez en cuando: pasarle true al switch. Así, en lugar de comparar un valor con otros valores, cada case es una condición y se ejecuta el primero que dé true.

let edad = 25switch (true) {  case edad >= 18 && edad < 25:    console.log('Eres mayor de edad y eres joven')    break  case edad >= 25 && edad < 40:    console.log('Eres mayor de edad y estás en plena madurez')    break  case edad >= 40:    console.log('Eres mayor de edad y estás en la mejor edad')    break  default:    console.log('Eres menor de edad')}

Con edad en 25, la primera condición es false y la segunda es true, así que te dirá que estás en plena madurez.

Es un patrón algo más avanzado y una alternativa a encadenar if y else if. En mi opinión es más difícil de leer y puede confundir, pero conviene que lo conozcas por si te lo encuentras por ahí.