Estructura switch en JavaScript

Estructura switch

La sentencia switch, es una forma fácil y eficaz para poner a prueba una variable para varios valores y luego ejecutar un determinado código, basado en las coincidencias.

A pesar de que la tarea se puede cumplir mediante el uso de if / else...if, hacerlo puede ser engorroso, la sentencia switch es más útil para esta situación.

Consideremos el ejemplo de un sitio web que necesita para su ejecución un determinado código basado en el idioma que el usuario elija. Para este ejercicio, se supone que el visitante ha elegido su lengua a través de un formulario. (Después veremos como detectar el idioma de manera automática con el Modelo de Objeto del Navegador).

Pero antes, si deseásemos hacer esto con if / if...else, el procedimiento seria así:

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            //Asuma una variable llamada lengujeSeleccion
            if (lenguajeSeleccion == "en") {
            // El idioma es  Ingles, ejecutar código corresponiente a  Ingles.
            }
            else if (lenguajeSeleccion == "al") {
            // El idioma es  Aleman, ejecutar código corresponiente a  Aleman.
            }
            else if (lenguajeSeleccion == "pt") {
            // El idioma es  Portugues, ejecutar código corresponiente a  Portugues.
            }
            else {
            // El idioma no se eligió, usar por defecto español
            }
        </script>
    </body>
</html>

Este código funciona bien cuando se han seleccionado sólo unos pocos idiomas, pero imagine este escenario con 20 o más idiomas.

A continuación, añadir más código para cada ejecución, pues rápidamente se convierte en un laberinto.

Aquí está el mismo código de una sentencia switch:

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            switch(lenguajeSeleccion) {
                case "en":
                //  El idioma es  Ingles, ejecutar código corresponiente a  Ingles.
                break;
                case "al":
                //  El idioma es  Aleman, ejecutar código corresponiente a  Aleman.
                break;
                case "pt":
                //  El idioma es  Portugues, ejecutar código corresponiente a  Portugues.
                break;
                default:
                // El idioma no se eligió, usar por defecto español
                }
                // Volver al código fuera de l estructura Switch
        </script>
    </body>
</html>

Que sucedió:

En la sentencia switch, se ve la lengua en cada caso y luego ejecuta el código para ese caso.
La sentencia break indica el final del código que se ejecuta cuando se encuentra una coincidencia.
La sentencia break hace que la ejecución del código se detenga y salga de la estructura switch, y así continuar con la ejecución del sitio.

Por ejemplo , si la variable se lenguajeSeleccion "al" y la sentencia break faltaba, se ejecuta el código para el alemán, pero la sentencia switch continuará ejecutando el código para los lenguajes posteriores hasta que se encuentre con una sentencia break o llega al final del interruptor comunicado.

Casi siempre se utiliza la sentencia break con cada caso de una sentencia switch.
Sin embargo, parte de la elegancia de la sentencia switch es cuando se tienen varios casos que deben ejecutar el mismo código.
Consideremos un ejemplo donde el visitante eliga la región donde vive.
En dicho sitio, los visitantes de los Estados Unidos, Australia y Gran Bretaña, probablemente querrían que su página que se muestre en Inglés, a pesar de que las personas en estos tres países explican (y pronunciar ) muchas palabras de forma diferente.
He aquí un ejemplo sentencia switch para este escenario:

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            switch(paisSeleccion) {
                case "US":
                case "Australia":
                case "Great Britain":
                // El idioma es  Ingles, ejecutar código corresponiente a  Ingles.
                break;
                case "Germany":
                // El idioma es  Aleman, ejecutar código corresponiente a  Aleman.
                break;
                case "Portugal":
                // El idioma es  Portugues, ejecutar código corresponiente a  Portugues.
                break;
                default:
                // El idioma no se eligió, usar por defecto español
                }
                // Volver al código fuera de l estructura Switch
        </script>
    </body>
</html>

Si el visitante selecciona Australia como su país; en el caso de Australia coincidirá el código para Inglés.
Gracias a la sentencia break, JavaScript luego escapa de la estructura switch y ejecuta la primera línea de código después de la estructura switch.