Tema 7 · Control de Flujo

Estructura Switch y Casos Múltiples

Aprende a reemplazar cadenas complejas de if/else con la sentencia switch: cláusulas case, la importancia de break y la cláusula default.

Condicionales y Operador Ternario Bucles: for, while y do...while

¿Cuándo usar la Sentencia Switch?

Cuando una variable puede tomar muchos valores específicos diferentes, encadenar múltiples if ... else if ... else if resulta repetitivo y difícil de leer. La estructura switch ofrece una alternativa limpia y ordenada. 

switch (expresion) {
  case valor1:
    // Código a ejecutar
    break;
  case valor2:
    // Código a ejecutar
    break;
  default:
    // Si no coincide con ningún caso anterior
}

Detalles Críticos de Switch

  • Comparación Estricta (===): El switch evalúa los casos usando igualdad estricta. Si evalúas el número 2, no coincidirá con el texto "2".
  • La importancia de break: Si omites la palabra break, JavaScript continuará ejecutando los casos siguientes aunque no coincidan (comportamiento conocido como fall-through).
  • Casos Compartidos: Puedes agrupar varios case seguidos si comparten exactamente la misma acción (ej: días de fin de semana).

⚡ Selector de Temarios con Switch

Selecciona un día de la semana para que la sentencia switch devuelva la asignatura correspondiente:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Estructura Switch en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-switch { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    select { width: 100%; padding: 8px 10px; margin: 8px 0 15px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .info-clase { background: #f0fdf4; border-left: 4px solid #16a34a; padding: 14px; border-radius: 4px; }
  </style>
</head>
<body>

  <div class="card-switch">
    <h3 style="margin-top: 0; color: #0f172a;">Horario Académico Kilopolis</h3>

    <label for="selector-dia">Selecciona un día de la semana:</label>
    <select id="selector-dia" onchange="consultarClase()">
      <option value="lunes">Lunes</option>
      <option value="martes">Martes</option>
      <option value="miercoles">Miércoles</option>
      <option value="jueves">Jueves</option>
      <option value="viernes">Viernes</option>
      <option value="sabado">Sábado</option>
      <option value="domingo">Domingo</option>
    </select>

    <div id="resultado-horario" class="info-clase"></div>

    <script>
      function consultarClase() {
        const dia = document.getElementById('selector-dia').value;
        let tema = "";

        switch (dia) {
          case "lunes":
            tema = "HTML5 Semántico y Arquitectura Web";
            break;
          case "martes":
            tema = "CSS3 Avanzado: Flexbox y Grid";
            break;
          case "miercoles":
            tema = "JavaScript Moderno ES6+ y DOM";
            break;
          case "jueves":
            tema = "PHP 8.3 Orientado a Objetos";
            break;
          case "viernes":
            tema = "Bases de Datos Relacionales MySQL";
            break;
          case "sabado":
          case "domingo": // Casos compartidos
            tema = "🎉 Fin de Semana: Taller Práctico y Proyecto";
            break;
          default:
            tema = "Día no reconocido.";
        }

        document.getElementById('resultado-horario').innerHTML = `
          <strong>Asignatura:</strong> ${tema}
        `;
      }

      consultarClase();
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.