Switch JavaScript: ¿Qué debes saber para utilizarlo como un experto?

Hace poco, mientras ayudaba a un compañero a simplificar su código, me topé con un bloque de condicionales if-else interminable. Aunque funcionaba, era difícil de leer y aún más complicado de mantener. Fue entonces cuando le sugerí usar Switch JavaScript para transformar esos bloques en estructuras claras y fáciles de manejar.

A ti también voy a explicarte todo lo necesario para dominar el javascript switch, desde su sintaxis básica hasta trucos avanzados para que lo aproveches bastante. ¡Prepárate para hacer tu código más limpio y profesional!

¿Qué es Switch JavaScript?

El switch en JavaScript es una estructura de control que permite tomar decisiones basadas en el valor de una expresión. A diferencia de las condicionales if-else, el switch evalúa una sola expresión y la compara con múltiples casos posibles, ejecutando el código correspondiente al caso coincidente.

Es muy eficaz porque tiene una excelente capacidad para manejar múltiples opciones de manera ordenada y legible. De paso te aconsejo aprender Switch Case JavaScript para que entiendas la diferencia.

Sintaxis básica de Switch JavaScript

La sintaxis de switch es sencilla y se organiza de la siguiente manera:

switch (expresión) {
  case valor1:
    // Código a ejecutar si expresión === valor1
    break;
  case valor2:
    // Código a ejecutar si expresión === valor2
    break;
  default:
    // Código a ejecutar si ninguno de los casos coincide
}

• expresión: Este es el valor que deseas evaluar.
• case valor: Un caso que se compara con la expresión.
• break: Detiene la ejecución para evitar que otros casos se ejecuten.
• default: Código ejecutado si ningún caso coincide (opcional).

Ejemplos prácticos para dominar Switch JavaScript

Detectar días de la semana

Este ejemplo evalúa un número que representa un día de la semana. Si el número coincide con un caso, imprime el día correspondiente. Si el número no está entre 1 y 5, imprime “Fin de semana”, manejado en el caso default.

const dia = 3;

switch (dia) {
  case 1:
    console.log("Lunes");
    break;
  case 2:
    console.log("Martes");
    break;
  case 3:
    console.log("Miércoles");
    break;
  case 4:
    console.log("Jueves");
    break;
  case 5:
    console.log("Viernes");
    break;
  default:
    console.log("Fin de semana");
}

Mira la salida:
“Miércoles”

Validar rangos de edades

Aquí se usa el valor booleano de expresiones (true) como base del switch. Cada caso evalúa si la edad cae dentro de un rango específico, lo que permite clasificar fácilmente a la persona como niño, adolescente, adulto o adulto mayor.

const edad = 25;

switch (true) {
  case edad < 13:
    console.log("Niño");
    break;
  case edad < 20:
    console.log("Adolescente");
    break;
  case edad < 60:
    console.log("Adulto");
    break;
  default:
    console.log("Adulto mayor");
}

Esta es la salida:
“Adulto”

Multiples valores para un mismo caso

En este ejemplo, varios valores (gato, perro, conejo) están asociados al mismo caso, lo que reduce líneas de código y permite tratar varias opciones con una misma acción. Si el valor no coincide con ninguno, el default maneja los demás casos.

const animal = "perro";

switch (animal) {
  case "gato":
  case "perro":
  case "conejo":
    console.log("Este es un animal doméstico.");
    break;
  default:
    console.log("Animal salvaje.");
}

Observa la salida:
“Este es un animal doméstico.”

¿Qué pasa si olvidas un break?

Si omites un break, el programa continuará ejecutando todos los casos siguientes, incluso si no coinciden con la expresión. Esto puede ser útil en ciertos escenarios, pero en la mayoría de los casos genera errores no deseados.

Ejemplo:

Mira que, aunque el primer caso coincide, el programa sigue ejecutando los casos siguientes, lo que lleva a resultados inesperados si no se planea adecuadamente.

const numero = 1;

switch (numero) {
  case 1:
    console.log("Uno");
  case 2:
    console.log("Dos");
  default:
    console.log("Otro número");
}

Esta es la salida:
“Uno”
“Dos”
“Otro número”

Casos avanzados en los que usarás Switch JavaScript

Usar default en cualquier posición

Aunque normalmente default se coloca al final, puedes usarlo en cualquier lugar. Sin embargo, ten en cuenta que, si no hay un break, continuará ejecutando los casos siguientes.

const valor = "X";

switch (valor) {
  default:
    console.log("No es un valor esperado.");
    break;
  case "A":
    console.log("Es A.");
    break;
}

Salida:
“No es un valor esperado.”

Operaciones secuenciales con Switch JavaScript

En ciertos casos, puedes aprovechar la ausencia de break para ejecutar múltiples operaciones:

const nivel = 2;

switch (nivel) {
  case 1:
    console.log("Nivel básico");
  case 2:
    console.log("Nivel intermedio");
  case 3:
    console.log("Nivel avanzado");
    break;
}

Salida:
“Nivel intermedio”
“Nivel avanzado”

Consejos para usar Switch JavaScript como un experto

1. Usa el break correctamente: Asegúrate de incluir break en cada caso para evitar ejecuciones no deseadas.
2. Aprovecha el default: Úsalo para manejar casos imprevistos.
3. Múltiples valores en un caso: Agrupa opciones similares para reducir líneas de código.
4. Compara con tipos estrictos: El switch utiliza comparación estricta (===), lo que aumenta la precisión.
5. Evalúa booleanos: No estás limitado a números o strings; puedes usar expresiones booleanas.

El Switch JavaScript es perfecto para simplificar y organizar tu código cuando trabajas con múltiples condiciones. Tu código ahora será más legible y funcionará mejor. Programa desde cero y domina herramientas como esta, en el Bootcamp Aprende a Programar desde Cero de KeepCoding. ¡Transforma tu futuro y entra al mundo IT con nosotros!