La declaración de cambio de JavaScript es una declaración de flujo de control condicional. Es increíblemente útil para crear bloques condicionales con muchas cláusulas.
Este artículo es un tutorial sobre la declaración de cambio y cómo usarla. También lo compararemos con otras construcciones condicionales, declaraciones if y operadores ternarios para que sepa cuándo usar cada uno.
Tabla de contenido
¿Qué es la declaración de cambio en JavaScript?
La declaración de cambio de JavaScript se utiliza para decidir qué rama de código ejecutar en función del valor de una expresión. Es una de las dos declaraciones condicionales en JavaScript.
La primera es la declaración if y la segunda es el operador ternario. Funciona de manera muy similar a los dos pero tiene matices diferentes, lo que lo hace ideal para algunos casos. En este artículo, vamos a explorar todo eso.
Cómo utilizar la declaración de cambio de JavaScript
En esta parte del artículo, explicaré la declaración de cambio de JavaScript y cómo usarla. Usaré ejemplos de código, por lo que necesitarás un compilador de JavaScript para seguirlo. El más fácil de usar es este compilador de JavaScript en línea. Alternativamente, puede consultar nuestro artículo sobre los mejores IDE de JavaScript en línea.
Sintaxis general
La sintaxis general para una declaración de cambio es la siguiente:
switch(<expression>) {
case <value 1>:
<statements>
break;
case <value 2>:
<statements>
break;
default:
<statements>
}
La palabra clave switch marca el comienzo de un bloque de cambio de JavaScript. Dentro del paréntesis, ingresa cualquier expresión de JavaScript. Una expresión es cualquier cosa que se evalúe como un valor. Por ejemplo, literales como cadenas o números, variables o llamadas a funciones.
A continuación, agregamos el cuerpo de la declaración de cambio entre llaves. El cuerpo se compone de varios casos. Cada caso tiene un valor y un grupo de afirmaciones. Si la expresión entre paréntesis es igual al valor de un caso, entonces se ejecutan las declaraciones de ese caso.
Para cada caso, podemos agregar la palabra clave break. Agregar esta palabra es completamente opcional. Si lo agrega, JavaScript sale del bloque de cambio cuando lo encuentra. Si no está presente, JavaScript continuará ejecutando todos los casos posteriores. Esto se conoce como caída. A menos que desee aprovechar la falla, se recomienda agregar la palabra clave break.
La última palabra clave a tener en cuenta es la palabra clave predeterminada. Este caso coincide con cualquier valor de la expresión entre paréntesis.
Ejemplos
Esta sección demostrará diferentes ejemplos del uso de la declaración de cambio.
#1. Con caída
A continuación se muestra un ejemplo del uso de la instrucción switch sin la palabra clave break. El propósito de esto es demostrar el fracaso.
En este ejemplo, estamos escribiendo código para manejar diferentes códigos de estado HTTP:
const statusCode = <insert status code here>
switch (statusCode) {
case 200:
console.log('OK');
case 301:
console.log('Redirect');
case 403:
console.log('Forbidden');
case 404:
console.log('Not Found');
case 500:
console.log('Internal Server Error')
}
En el fragmento de código anterior, verificamos si un valor es igual a un código de estado particular y luego imprimimos un mensaje que describe el código de estado.
Observe lo que sucede cuando configura el código de estado en 403.
Después de emparejar los 403 casos, también se emparejaron todos los casos siguientes. Esto se llama fracaso. Esto no es ideal, ya que a menudo nos gusta emparejar un caso. Esta extraña peculiaridad de JavaScript es la razón por la que es necesario agregar la palabra clave break.
#2. Sin caída
Para evitar errores, agregamos la palabra clave break al final de cada caso. El siguiente ejemplo demuestra lo que sucede cuando lo hace.
const statusCode = <insert a status code here>
switch (statusCode) {
case 200:
console.log('OK');
break;
case 301:
console.log('Redirect');
break;
case 403:
console.log('Forbidden');
break;
case 404:
console.log('Not Found');
break;
case 500:
console.log('Internal Server Error')
break;
}
Y cuando ejecuta el código anterior con el código de estado 403, obtiene esto.
Como puede ver, el código ahora coincide con un solo caso y evita fallos.
#3. Fallthrough útil
Dicho esto, es importante tener en cuenta que la solución alternativa puede resultar útil en algunos casos. Considere el siguiente ejemplo en el que queremos comprobar si una persona se mueve horizontal o verticalmente según la entrada direccional.
const direction = '<enter direction here>'
switch(direction) {
case 'left':
case 'right':
console.log('horizontal movement');
break;
case 'up':
case 'down':
console.log('horizontal movement');
break;
}
Si configura la dirección hacia la izquierda y ejecuta el código anterior, este es el resultado:
Y cuando estableces la dirección a la derecha, obtienes el mismo resultado:
Esto se debe a que cuando el caso de la izquierda coincide, pasa al caso de la derecha e imprime «movimiento horizontal». Pero como hay una palabra clave de interrupción, no cae en el caso de arriba. Cuando el caso correcto coincide, ejecuta las declaraciones en el caso correcto y se interrumpe.
Por lo tanto, se muestra ‘movimiento horizontal’ cuando la dirección es izquierda o derecha. Por lo tanto, la solución fallida le permite crear lógica OR en su código.
#4. Rangos coincidentes
La declaración de cambio de JavaScript comprueba si el valor de un caso es igual al valor de la expresión. Si es así, ejecuta las declaraciones en ese caso. Sin embargo, es posible que en ocasiones desee comprobar si un valor se encuentra en un rango determinado. Hacer coincidir rangos puede ser complicado, pero el siguiente fragmento de código demuestra una solución alternativa.
En el siguiente ejemplo, estamos implementando un programa que, dada una calificación, imprime la calificación. Por ejemplo, si la marca es superior a 90, el programa imprimirá A+. Si es superior a 80 pero inferior a 90, imprimirá A, y así sucesivamente.
Para ello, he puesto la expresión true entre paréntesis. Luego, el valor de cada caso se ha definido como una operación lógica que sólo será verdadera si la marca está en el rango para ese caso. Por ejemplo, la marca del último caso >= 90 solo será verdadera si la marca es mayor o igual a 90. Por lo tanto, coincidirá con el valor de la expresión ya que verdadero es igual a verdadero.
const mark = <replace with any mark>;
switch (true) {
case mark >= 50 && mark < 60:
console.log('D');
break;
case mark >= 60 && mark < 70:
console.log('C');
break;
case mark >= 70 && mark < 80:
console.log('B');
break;
case mark >= 80 && mark < 90:
console.log('A')
break;
case mark >= 90:
console.log('A+')
break;
default:
console.log('<50')
}
El resultado del código anterior cuando la marca se establece en 80 es:
Y cuando la marca se establece en 95:
Y cuando la marca es 45:
Alcance léxico
Las declaraciones dentro de un caso en un conmutador no tienen alcance léxico. Esto significa que las variables definidas en un caso serán accesibles en un caso diferente. Es importante saber esto al escribir bloques de interruptores donde se combinarán más de un caso. Aquí tienes un ejemplo para explicar esto mejor:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
En el fragmento de código anterior, ambos casos coinciden. En el primer caso, definimos la variable num; en el segundo accedemos a su valor. No obtendremos ningún error, como puede ver en la siguiente captura de pantalla:
Diferencia entre una declaración de cambio y otros condicionales
Una declaración Switch se adapta mejor a escenarios en los que se prueban múltiples condiciones. Una declaración if es adecuada para condiciones en las que se prueban 2 o 3 condiciones. Un operador ternario solo es bueno para condiciones en las que desea expresar un condicional como una sola línea.
Para mayor brevedad, debería optar por escribir operadores ternarios primero. Si es imposible expresar la lógica en un operador ternario, entonces puede utilizar una declaración if. Pero si eso no es posible, opta por la declaración de cambio.
Conclusión
Este artículo cubrió la declaración de cambio, cómo usarla y sus extrañas peculiaridades. También cubrimos cuándo usarlo.
A continuación, es posible que desees pulir JavaScript utilizando estas hojas de trucos de JavaScript.
