Estructura switch case en JavaScript

La declaración switch case es una herramienta eficiente en JavaScript que permite tomar decisiones en función del valor de una expresión. Es especialmente útil cuando necesitas comparar una variable contra múltiples posibles valores, lo que hace que el código sea más legible y organizado en comparación con una serie de declaraciones if-else.

¿Qué es switch case?

La declaración switch case evalúa una expresión y ejecuta el bloque de código asociado al caso que coincide con el valor de esa expresión. Si no hay coincidencias, se puede ejecutar un bloque default, el cual actúa como un “caso por defecto”.

La sintaxis básica de una declaración switch es la siguiente:

javascript
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 expresión no coincide con ningún case
}

¿Como funciona la estructura switch case?

  • expresión: El valor que será evaluado.
  • case: Cada caso especifica un valor que se comparará con la expresión.
  • break: Detiene la ejecución de los casos para evitar la “caída” (fall-through).
  • default: Es opcional y se ejecuta si no hay coincidencias con ningún caso.

Cada case se compara con la expresión utilizando una comparación estricta (===). Si hay una coincidencia, se ejecutan las declaraciones asociadas a ese case.

Ventajas sobre if-else

A diferencia de una serie de declaraciones if else, que evalúan condiciones de forma secuencial, la estructura switch evalúa una expresión una sola vez y luego busca un case que coincida con el resultado de esa expresión. Lo que resulta mejor en:

  • Legibilidad: Las estructuras switch case son más claras y fáciles de seguir cuando hay muchas condiciones.
  • Optimización: En algunos navegadores y motores JavaScript, switch case puede ser más eficiente para evaluar múltiples valores.

Un ejemplo práctico podría ser un sistema de menú interactivo:

javascript
const option = 'save';

switch (option) {
  case 'new':
    console.log('Crear nuevo archivo');
    break;
  case 'save':
    console.log('Guardar archivo actual');
    break;
  case 'delete':
    console.log('Eliminar archivo seleccionado');
    break;
  default:
    console.log('Opción no reconocida');
}

En este caso, al ejecutar el código veríamos en la consola el mensaje “Guardar archivo actual”, ya que el resultado de la expresión option coincide con el case 'save'. Técnicamente, la declaración switch del ejemplo anterior es equivalente a la siguiente  declaración: if else

javascript
const option = 'save';

if (option === 'new') {
  console.log('Crear nuevo archivo');
} else if (option === 'save') {
  console.log('Guardar archivo actual');
} else if (option === 'delete') {
  console.log('Eliminar archivo seleccionado');
} else {
  console.log('Opción no reconocida');
}

Ejemplos de uso de switch case en JavaScript

La gestión de fechas es común en muchos sistemas. Este ejemplo ilustra cómo puedes usar switch case para mapear números del 1 al 7 a los días de la semana. El valor de day es 3, por lo que se ejecuta el bloque de código asociado al caso 3 y dayName se establece en “Miércoles”.

javascript
const day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = 'Lunes';
    break;
  case 2:
    dayName = 'Martes';
    break;
  case 3:
    dayName = 'Miércoles';
    break;
  case 4:
    dayName = 'Jueves';
    break;
  case 5:
    dayName = 'Viernes';
    break;
  case 6:
    dayName = 'Sábado';
    break;
  case 7:
    dayName = 'Domingo';
    break;
  default:
    dayName = 'Día inválido';
}

console.log(dayName);

Ejemplo con múltiples casos:

En ciertas aplicaciones algunos valores diferentes comparten el mismo resultado. Este ejemplo muestra cómo puedes agrupar varios casos en un switch para manejarlo de forma eficiente. El ejemplo está basado en un sistema que asigna colores a frutas.

javascript
const fruit = 'manzana';
let color;

switch (fruit) {
  case 'plátano':
  case 'limón':
    color = 'amarillo';
    break;
  case 'naranja':
    color = 'naranja';
    break;
  case 'manzana':
  case 'fresa':
    color = 'rojo';
    break;
  default:
    color = 'Color no definido';
}

console.log(color);

Ejemplo sin break: Fall-through intencionado

El “fall-through” en un switch case ocurre cuando no usamos break, permitiendo que el flujo continúe al siguiente caso. Este ejemplo muestra cómo se puede utilizar de manera intencional para agrupar casos que comparten lógica. Es ideal para gestionar calificaciones con mensajes similares.

javascript
const grade = 'B';
let message;

switch (grade) {
  case 'A':
    message = 'Excelente';
  case 'B':
    message = 'Muy bien';
  case 'C':
    message = 'Bien';
  case 'D':
    message = 'Suficiente';
  case 'F':
    message = 'Insuficiente';
    break;
  default:
    message = 'Nota no válida';
}

console.log(message);

En el ejemplo anterior el interprete busca el case que coincida con el valor de grade y comienza a ejecutar desde allí. Sin embargo, debido a la ausencia de break, no se detiene después de ejecutar el código para ‘B’. En su lugar continúa ejecutando los casos subsiguientes sin verificar las condiciones, sobrescribiendo el valor de message en cada paso, hasta que finalmente encuentra un break o llega al final de la estructura.

El comportamiento de “fallthrough” en una estructura switch ocurre cuando no se utiliza la instrucción break después de cada caso (case).

Usar valores booleanos y condiciones en switch

A veces no queremos comparar valores exactos, sino trabajar con rangos o condiciones lógicas. Este ejemplo utiliza switch con valores booleanos para clasificar una edad en categorías como “niño”, “adolescente”, “adulto” o “senior”. Esto puede ser útil para formularios de registro o encuestas.

javascript
const age = 20;

let category;

switch (true) {
  case age < 13:
    category = 'Niño';
    break;
  case age >= 13 && age < 20:
    category = 'Adolescente';
    break;
  case age >= 20 && age < 65:
    category = 'Adulto';
    break;
  default:
    category = 'Senior';
}

console.log(category);

Conclusión:

La declaración switch case es una herramienta esencial en JavaScript para manejar múltiples condiciones de manera legible y organizada. Al entender su funcionamiento, sintaxis y mejores prácticas, puedes escribir código más claro y eficiente. Usa switch en situaciones donde tengas múltiples valores para comparar, y siempre recuerda las buenas prácticas para evitar errores comunes. Recuerda utilizar break para evitar la “caída” o “fallthrough” entre casos y emplea default para manejar cualquier valor no previsto.

En el siguiente tutorial veremos el bucle while, estructura que nos permite ejecutar repetidamente un bloque de código mientras una condición sea verdadera.

+1
0
+1
0