Cómo usar declaraciones condicionales en JavaScript

Introducción

En programación, habrá muchas ocasiones en las que querrá ejecutar diferentes bloques de código dependiendo de la entrada del usuario u otros factores.

Por ejemplo, es posible que desee enviar un formulario si todos los campos están completados correctamente, pero es posible que desee evitar que ese formulario se envíe si faltan algunos campos obligatorios. Para realizar tareas como estas, tenga declaraciones condicionales (declaraciones condicionales), que son una parte integral de todos los lenguajes de programación.

Las declaraciones condicionales realizan una acción específica basada en los resultados de un resultado de true o false.

Algunos ejemplos de declaraciones condicionales de JavaScript que puede ver incluyen:

• Verifique la ubicación de un usuario y vea el idioma correcto según el país
• Incluya un formulario al enviar o muestre advertencias junto a los campos obligatorios que faltan
• Abra un menú desplegable en un evento de clic o cierre un menú desplegable si ya está abierto
• Muestra el sitio web de un proveedor de alcohol si el usuario ha superado la edad legal para beber.
• Ver el formulario de reserva de un hotel, pero no si el hotel está reservado

Las declaraciones condicionales son parte de la lógica, la toma de decisiones o el control de flujo de un programa de computadora.

En este tutorial, repasaremos las declaraciones condicionales, incluidas las palabras clave if, else else if También cubriremos el operador ternario.

Si declaración

La más básica de las declaraciones condicionales es la declaración if Una if evaluará si una declaración es verdadera o falsa y solo se ejecutará si la declaración devuelve true. El bloque de código se ignorará en el caso de un false y el programa pasará a la siguiente sección.

Una if se escribe con la if, seguida de una condición entre paréntesis, con el código que se ejecutará entre corchetes. En resumen, se puede escribir como if () {}.

Aquí hay un examen más largo de la if básica.

if (condition) {
 //code that will execute if condition is true
 }

El contenido de una if se incluye entre corchetes que contienen el bloque de código a ejecutar y no terminan con un punto y coma, como un bloque de funciones.

Por ejemplo, consideremos una aplicación de compras. Supongamos, para la funcionalidad de esta aplicación, que un usuario que ha depositado una cierta cantidad de fondos en su cuenta desea comprar un artículo en la tienda.

//Set balance and price of item
 const balance = 500;
 const jeans = 40;

 //Check if there are enough funds to purchase item
 if (jeans <= balance) {
 console.log("You have enough money to purchase the item!");
 }

You have enough money to purchase the item!

Tenemos un 500 y queremos comprar un par de jeans por 40. Usando el operador menor o igual, podemos verificar si el precio de los jeans es menor o igual a la cantidad de fondos que tenemos. Dado que jeans <= balance evalúa como true, la condición pasará y se ejecutará el bloque de código.

En un nuevo ejemplo, crearemos un nuevo artículo de tienda que cueste más que el saldo disponible.

//Set balance and price of item
 const balance = 500;
 const phone = 600;

 //Check if there is enough funds to purchase item
 if (phone <= balance) {
 console.log("You have enough money to purchase the item!");
 }

Este ejemplo no tendrá salida, ya que phone <= balance se evalúa como false. El bloque de código simplemente se ignorará y el programa pasará a la siguiente línea.

Otra declaración

Con las if, ejecutamos código solo cuando true, pero a menudo queremos que suceda algo más si la condición falla.

Por ejemplo, es posible que deseemos mostrar un mensaje que indique al usuario qué campos se completaron correctamente si un formulario no se envió correctamente. En este caso, usaremos la else, que es el código que se ejecutará si falla la condición original.

La else se escribe después de la if y no tiene condiciones entre paréntesis. Aquí está la sintaxis de una if...else

if (condition) {
 //code that will execute if condition is true
 } else {
 //code that will execute if condition is false
 }

Usando el mismo ejemplo anterior, podemos agregar un mensaje para ver si los fondos en la cuenta son demasiado bajos.

//Set balance and price of item
 const balance = 500;
 const phone = 600;

 //Check if there is enough funds to purchase item
 if (phone <= balance) {
 console.log("You have enough money to purchase the item!");
 } else {
 console.log("You do not have enough money in your account to purchase this item.");
 }

You do not have enough money in your account to purchase this item.

Dado que la if falló, solo se ejecutará el código dentro de la else

Esto puede ser muy útil para mostrar alertas o permitir que el usuario sepa qué acciones tomar para seguir adelante. Por lo general, se requerirá acción tanto para el éxito como para el fracaso, por lo que if...else es más común que solo una if

Else if declaración

Con if y else, podemos ejecutar bloques de código dependiendo de si una condición es true o false. Sin embargo, a veces podemos tener múltiples condiciones y resultados posibles y necesitamos más de dos opciones simples. Una forma de hacer esto es con la else if, que puede evaluar más de dos resultados posibles.

A continuación, se muestra un ejemplo básico de un bloque de código que contiene una if, varias else if y una else en caso de que ninguna de las condiciones se evalúe como true.

if (condition a) {
 //code that will execute if condition a is true
 } else if (condition b) {
 //code that will execute if condition b is true
 } else if (condition c) {
 //code that will execute if condition c is true
 } else {
 //code that will execute if all above conditions are false
 }

JavaScript intentará ejecutar todas las declaraciones en orden y, si ninguna tiene éxito, se establecerá automáticamente en el bloque else

Puede tener todas las else if En el caso de muchas else if, se puede preferir la instrucciónswitch

Como ejemplo de múltiples else if, podemos crear una aplicación de calificación que producirá una calificación con letras basada en una puntuación de 100.

Los requisitos de esta aplicación son los siguientes:

• El grado 90 y superior es una A
• El grado 80 a 89 es B.
• El grado 70 a 79 es una C
• El grado 60 a 69 es una D
• El grado 59 o inferior es una F.

A continuación, crearemos un conjunto simple de if, else y else if, y probaremos los grados con un valor dado.

//Set the current grade of the student
 let grade = 87;

 //Check if grade is an A, B, C, D, or F
 if (grade >= 90) {
 console.log("A");
 } else if (grade >= 80) {
 console.log("B");
 } else if (grade >= 70) {
 console.log("C");
 } else if (grade >= 60) {
 console.log("D");
 } else {
 console.log("F");
 }

B

En nuestro ejemplo, primero verificamos la puntuación más alta, que será mayor o igual a 90. Después de eso, la else if ocurre durante más de 80, 70 y 60 hasta que alcanza el valor predeterminado else.

Si bien nuestro valor de grade 87 es técnicamente cierto también para C, D y F, las ofertas se detendrán en la primera que tenga éxito. Por lo tanto, obtenemos una salida de B, que es la primera coincidencia.

Operador ternario

El operador ternario, también conocido como operador condicional, se usa como atajo para una if...else.

Un operador ternario se escribe con la sintaxis de un signo de interrogación ( ? ) Seguido de dos puntos ( :, como se muestra a continuación.

(condition) ? expression on true: expression on false

En la declaración anterior, la condición se escribe primero, seguida de ?. La primera expresión se ejecutará en true y la segunda expresión se ejecutará en false. Es muy similar a una if...else, con una sintaxis más compacta.

En este ejemplo, crearemos un programa que verifica si un usuario tiene 21 o menos. En este caso, "You may enter" se imprimirá en la consola. De lo contrario, "You may not enter." en la consola.

//Set age of user
 let age = 20;

 //Place result of ternary operation in a variable
 const oldEnough = (age >= 21) ? "You may enter.": "You may not enter.";

 //Print output
 oldEnough;

'You may not enter.'

Dado que la age era menor de 21, el mensaje de error se envía a la consola. El if...else equivalente a esto sería "You may enter." en la declaración if "You may not enter." en la declaración else

Conclusión

Las declaraciones condicionales nos proporcionan un control de flujo para determinar la salida de nuestros programas. Son uno de los bloques de construcción fundamentales de la programación y se pueden encontrar en prácticamente todos los lenguajes de programación.

En este artículo, aprendimos cómo usar if, else y else if, declaraciones de anidamiento y el uso del operador ternario.