Declaración de cambio de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

La instrucción switch se utiliza para realizar diferentes acciones en función de diferentes condiciones.

La declaración switch de JavaScript

Utilice la instrucción switch para seleccionar uno de los muchos bloques de código que se ejecutarán.

Sintaxis

switch(expression) {
  case x:
     // code block
        break;
  case y:
     // code block
     break;
  default:
      // code block
 }

Así es como funciona:

  • La expresión de cambio se evalúa una vez.

  • El valor de la expresión se compara con los valores de cada caso.

  • Si hay una coincidencia, se ejecuta el bloque de código asociado.

  • Si no hay coincidencia, se ejecuta el bloque de código predeterminado.

Ejemplo

El método getDay() devuelve el día de la semana como un número entre 0 y 6.

(Domingo=0, Lunes=1, Martes=2..)

Este ejemplo utiliza el número del día de la semana para calcular el nombre del día de la semana:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
      day = "Monday";
     break;
  case 2:
       day = "Tuesday";
      break;
  case 3:
    day = "Wednesday";
      break;
  case 4:
      day = "Thursday";
     break;
  case 5:
      day = "Friday";
      break;
  case 6:
    day = "Saturday";
}

El resultado del día será:

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

La palabra clave break

Cuando JavaScript llega a una ruptura palabra clave, se sale del bloque del interruptor.

Esto detendrá la ejecución dentro del bloque de interruptores.

No es necesario romper el último cuerpo en el bloque del interruptor. El bloque se rompe (termina) allí de todos modos.

Nota: Si omite la instrucción break, el siguiente caso se ejecutará incluso si La evaluación no coincide con el caso.

La palabra clave predeterminada

La palabra clave default especifica el código que se ejecutará si no hay coincidencia de casos:

Ejemplo

El método getDay() devuelve el día de la semana como un número entre 0 y 6.

Si hoy no es sábado (6) ni domingo (0), escribe un mensaje predeterminado:

switch (new Date().getDay()) {
   
case 6:
      text = "Today is Saturday";
    break; 
  case 0:
      text = "Today is Sunday";
      break; 
   
default: 
      text = "Looking forward to the Weekend";
}

El resultado del texto será:

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

El caso default no tiene que ser el último caso en un cambio bloquear:

Ejemplo

switch (new Date().getDay()) {
  default: 
        text = "Looking forward to the Weekend";
    
  break;
  case 6:
        text = "Today is Saturday";
        break; 
  case 0:
        text = "Today is Sunday";
  }

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Si default no es el último caso en el bloque de cambio, recuerde finalizar el caso predeterminado con una interrupción.

Bloques de código comunes

A veces querrás diferente cambiar de caso para usar el mismo código.

En este caso de ejemplo, 4 y 5 comparten el mismo bloque de código, y 0 y 6 comparten otro bloque de código:

Ejemplo

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
      break; 
  case 0:
  case 6:
      text = "It is Weekend";
    break;
  default: 
    text = "Looking forward to the Weekend";
  }

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Detalles de cambio

Si varios casos coinciden con un valor de caso, se selecciona el primer caso.

Si no se encuentran casos coincidentes, el programa continúa con la etiqueta predeterminada.

Si no se encuentra ninguna etiqueta predeterminada, el programa continúa con las instrucciones después del cambio.

Comparación estricta

Los casos de cambio utilizan una comparación estricta (===).

Los valores deben ser del mismo tipo para que coincidan.

Una comparación estricta sólo puede ser verdadera si los operandos son del mismo tipo.

En este ejemplo no habrá coincidencia para x:

Ejemplo

 let x = "0";
switch (x) {
  case 0:
    text = "Off";
      break;
  case 1:
    text = "On";
    break;
    default:
    
  text = "No value found";
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let x = "0";

switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>