Fundamentos de JavaScript

Teoría: Estructura Switch

Cuando escribes un programa, a menudo necesitas que haga cosas diferentes según el valor de una variable. Por ejemplo:

  • Si el usuario es administrador, mostrar todos los botones.
  • Si el pedido ya fue pagado, mostrar un mensaje de confirmación.
  • Si el número es 1, escribir "one".

Para eso, usamos estructuras condicionales como if...else. Pero cuando hay muchas opciones, switch es una forma más clara de escribirlo.

Esquema de switch

Estados de una orden

Imagina que trabajas en una tienda en línea. Cada pedido tiene un estado que indica qué está pasando:

const status = 'paid';

Queremos mostrar un mensaje distinto según ese estado. Con if...else, el código se ve así:

if (status === 'processing') {
  console.log('Procesando tu pedido...');
} else if (status === 'paid') {
  console.log('¡Gracias por tu pago!');
} else if (status === 'new') {
  console.log('Hemos recibido tu pedido.');
} else {
  console.log('Estado desconocido');
}

Es como si tuvieras un buzón de pedidos y al revisar uno, dices:

  • “Ah, está en proceso, ¡vamos a prepararlo!”
  • “Ya está pagado, ¡gracias!”
  • “Es nuevo, avisemos al cliente.”

Cada estado tiene su reacción. Eso hace switch: abrir el buzón y reaccionar según lo que encuentra.

Funciona, pero si tenemos muchos estados, se vuelve difícil de leer. Aquí es donde switch nos ayuda a organizar mejor el código.

¿Qué es switch?

Compara una variable con varios valores posibles y ejecuta algo distinto según el caso.

Así se ve el ejemplo anterior usando switch:

switch (status) {
  case 'processing':
    console.log('Procesando tu pedido...');
    break;
  case 'paid':
    console.log('¡Gracias por tu pago!');
    break;
  case 'new':
    console.log('Hemos recibido tu pedido.');
    break;
  default:
    console.log('Estado desconocido');
}

Esto hace lo mismo que el ejemplo con if, pero se ve más limpio.

¿Qué significa cada parte?

  • switch Es la estructura general: abre la comparación.
  • status Es la variable que estamos evaluando.
  • case Es una opción que puede tener esa variable.
  • break Detiene la ejecución para que no siga leyendo más casos.
  • default Es lo que se ejecuta si no se cumple ningún case.

Y si olvido el break?

break significa “¡Detente aquí!” y evita que el programa siga ejecutando otros case. Si no colocamos break, la ejecución continuará automáticamente con el siguiente case, sin importar si su condición se cumple o no.

const status = 'processing';

switch (status) {
  case 'processing':
    console.log('Procesando...');
  case 'paid':
    console.log('Pagado');
  default:
    console.log('¿Qué está pasando?');
}

Salida

Procesando...
Pagado
¿Qué está pasando?

Como no pusimos break, el programa siguió ejecutando todos los casos desde el primero que coincidió. Esto se llama fall through (caída hacia abajo), y significa que el programa sigue ejecutando todos los bloques siguientes aunque no coincidan. Es como si te olvidaras de cerrar la puerta después de entrar.

Ejemplo: convertir número a palabra

Supón que tienes que mostrar el número ingresado como texto en inglés. Podrías hacerlo así:

const numberToWord = (count) => {
  switch (count) {
    case 1:
      return 'one';
    case 2:
      return 'two';
    case 3:
      return 'three';
    default:
      return 'unknown';
  }
};

console.log(numberToWord(2)); // "two"

💡 Aquí no usamos break porque cada return ya detiene la función.

Ejemplo: identificar el tipo de usuario

Supón que estás creando una app donde cada persona tiene un rol: 'admin', 'editor' o 'invitado'. Según su rol, puedes mostrarle diferentes mensajes.

const mostrarMensaje = (rol) => {
  switch (rol) {
    case 'admin':
      return 'Tienes acceso total';
    case 'editor':
      return 'Puedes editar contenido';
    case 'invitado':
      return 'Solo puedes ver contenido';
    default:
      return 'Rol no reconocido';
  }
};

console.log(mostrarMensaje('editor')); // "Puedes editar contenido"

Este tipo de lógica es muy común en sitios web, apps o juegos.

¿Cuándo usar switch?

  • Si solo tienes una o dos condiciones, if está bien.
  • Si estás comparando la misma variable contra varios valores posibles, switch es más ordenado.

Resumen

  • switch se usa cuando queremos comparar una sola variable contra diferentes valores.
  • Cada case representa una posible coincidencia y ejecuta cierto código.
  • Puede mejorar la legibilidad del código en comparación con múltiples if...else.

Con esta herramienta, tu código será más claro y organizado cuando necesites evaluar distintos valores de una misma variable. Prueba cambiar los valores y agregar más case para ver qué pasa. ¡Experimentar es la mejor forma de aprender!