Novedades ES6

Estructuras switch en Javascript

La estructura de control switch de Javascript es utilizada para tomar decisiones en función de distintos estados o valores de una variable. Las estructuras de control son la manera con la que se puede dominar el flujo de los programas, para hacer cosas distintas en función de los estados de las variables.

La instrucción switch es una alternativa para remplazar los if/else if.
La declaración switch evalúa una expresión, comparando el valor de esa expresión con una instancia case, y ejecuta declaraciones asociadas a ese case, así como las declaraciones en los case que siguen.

Sintaxis

switch (expresión) {
case valor1:
        //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor1
[break;]
case valor2:
        //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor2
[break;]
...
case valorN:
        //Declaraciones ejecutadas cuando el resultado de expresión coincide con valorN
[break;]
default:
        //Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión
[break;]
}
Opciones

  • expresión Es una expresión que es comparada con el valor de cada instancia case.
  • case valorN Una instancia case valorN es usada para ser comparada con la expresión. Si la expresión coincide con el valorN, las declaraciones dentro de la instancia case se ejecutan hasta que se encuentre el final de la declaración switch o hasta encontrar una interrupción break.
  • default Una instancia default, cuando es declarada, es ejecutada si el valor de la expresión no coincide con cualquiera de las otras instancias case valorN.

La instrucción switch es una alternativa para remplazar en algunas situaciones los if/else if.
De todos modos se puede aplicar en ciertas situaciones donde la condición se verifica si es igual a cierto valor. No podemos preguntar por mayor o menor.

Con un ejemplo sencillo veremos cual es su sintaxis. Confeccionar un programa que solicite que ingrese un valor entre 1 y 5. Luego mostrar en castellano el valor ingresado. Mostrar un mensaje de error en caso de haber ingresado un valor que no se encuentre en dicho rango.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var valor;
valor=prompt('Ingrese un valor comprendido entre 1 y 5:','');
//Convertimos a entero
valor=parseInt(valor);
switch (valor) {
case 1: document.write('uno');
break;
case 2: document.write('dos');
break;
case 3: document.write('tres');
break;
case 4: document.write('cuatro');
break;
case 5: document.write('cinco');
break;
default:document.write('debe ingresar un valor comprendido entre 1 y 5.');
}

</script>

</body>
</html>

Debemos tener en cuenta que la variable que analizamos debe ir después de la instrucción switch entre paréntesis. Cada valor que se analiza debe ir luego de la palabra clave 'case' y seguido a los dos puntos, las instrucciones a ejecutar, en caso de verificar dicho valor la variable que analiza el switch.

Es importante disponer la palabra clave 'break' al finalizar cada caso. La instrucciones que hay después de la palabra clave 'default' se ejecutan en caso que la variable no se verifique en algún case. De todos modos el default es opcional en esta instrucción.

Plantearemos un segundo problema para ver que podemos utilizar variables de tipo cadena con la instrucción switch.
Ingresar por teclado el nombre de un color (rojo, verde o azul), luego mostraremos un mensaje indicando el color ingresado:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var col;
col=prompt('Ingrese alguno de estos tres colores (rojo, verde, azul)' ,'');
switch (col) {
case 'rojo': document.write('se ingresó rojo');
break;
case 'verde': document.write('se ingresó verde');
break;
case 'azul': document.write('se ingresó azul');
break;
}
</script>

</body>
</html>

Cuando verificamos cadenas debemos encerrarlas entre comillas el valor a analizar:

case 'rojo': document.write('se ingresó rojo');
break;