Cómo utilizar las declaraciones If en JavaScript – una guía para principiantes

JavaScript es un lenguaje de programación poderoso y versátil que se utiliza ampliamente para crear páginas web dinámicas e interactivas. Uno de los bloques fundamentales de construcción de la programación en JavaScript es la instrucción if. Las instrucciones if permiten a los desarrolladores controlar el flujo de sus programas tomando decisiones basadas en

JavaScript es un lenguaje de programación poderoso y versátil que se utiliza ampliamente para crear páginas web dinámicas e interactivas.

Uno de los fundamentos básicos de la programación en JavaScript es la declaración if. Las declaraciones if permiten a los desarrolladores controlar el flujo de sus programas tomando decisiones basadas en ciertas condiciones.

En este artículo, exploraremos los conceptos básicos de las declaraciones if en JavaScript, entenderemos su sintaxis y veremos cómo se pueden utilizar para crear un código más receptivo e inteligente.

¿Qué es una declaración if?

Una declaración if es una declaración condicional que te permite ejecutar un bloque de código solo si se cumple una determinada condición. En otras palabras, proporciona una forma de tomar decisiones en tu código.

Por ejemplo, es posible que desees mostrar un mensaje al usuario si ha ingresado la contraseña correcta, o tal vez desees realizar una acción específica solo si una variable tiene un valor específico.

Aquí tienes un ejemplo sencillo para ilustrar la estructura básica de una declaración if:

let temperatura = 25;if (temperatura > 20) {  console.log("¡Hace un día cálido!");}

En este ejemplo, la declaración if verifica si el valor de la variable temperatura es mayor que 20. Si la condición es verdadera, se ejecuta el código dentro de las llaves ({}) y se imprime el mensaje “¡Hace un día cálido!” en la consola.

Sintaxis de las declaraciones if

La sintaxis de una declaración if en JavaScript es sencilla. Consiste en la palabra clave if, seguida de un conjunto de paréntesis que contienen una condición. Si la condición se evalúa como true, se ejecuta el código dentro de las llaves. Aquí está la sintaxis básica:

if (condición) {  // Código a ejecutar si la condición es verdadera}

Desglosemos los componentes de la declaración if:

• Palabra clave if: Esta es la palabra clave que inicia la declaración if y va seguida de un conjunto de paréntesis.
• Condición: Dentro de los paréntesis, se proporciona la condición que deseas evaluar. Esta condición debe dar como resultado un valor booleano (true o false).
• Bloque de código: El bloque de código está encerrado entre llaves {}. Si la condición es verdadera, se ejecuta el código dentro del bloque.

Es importante tener en cuenta que las llaves son esenciales, incluso si el bloque contiene solo una declaración. Incluir las llaves hace que tu código sea más legible y ayuda a prevenir errores que pueden ocurrir al agregar más declaraciones al bloque más adelante.

Declaraciones if simples

Profundicemos en las declaraciones if simples explorando algunos ejemplos. Las declaraciones if simples consisten en una única condición y un bloque de código que se ejecuta cuando la condición es verdadera.

Ejemplo 1: Verificar un número

let número = 7;if (número > 0) {  console.log("El número es positivo.");}

En este ejemplo, la declaración if verifica si el valor de la variable número es mayor que 0. Si la condición es verdadera, se imprime el mensaje “El número es positivo.” en la consola.

Ejemplo 2: Verificación de entrada de usuario

let entradaUsuario = prompt("Ingresa tu edad:");if (entradaUsuario >= 18) {  console.log("Eres elegible para votar.");}

Este ejemplo utiliza la función prompt para obtener la edad del usuario como entrada. Luego, la declaración if verifica si la edad ingresada es mayor o igual a 18. Si es verdadero, se imprime el mensaje “Eres elegible para votar.” en la consola.

Ejemplo 3: Verificar igualdad

let contraseña = "segura123";if (contraseña === "segura123") {  console.log("Acceso concedido.");}

En este ejemplo, la declaración if verifica si el valor de la variable password es exactamente igual a la cadena “secure123”. Si la condición es verdadera, se registra el mensaje “Access granted.” en la consola.

Declaraciones If-Else

Aunque las declaraciones if simples son útiles, a menudo querrás proporcionar una acción alternativa cuando la condición sea falsa. Aquí es donde entra en juego la declaración if-else. El bloque else contiene código que se ejecuta cuando la condición if es falsa.

Ejemplo: Declaración If-Else

let hour = 14;if (hour < 12) {  console.log("¡Buenos días!");} else {  console.log("¡Buenas tardes!");}

En este ejemplo, la declaración if verifica si el valor de la variable hour es menor que 12. Si es verdadero, registra “¡Buenos días!” en la consola. De lo contrario, registra “¡Buenas tardes!”.

Declaraciones If-Else If

A veces, es posible que tengas múltiples condiciones para verificar. En esos casos, puedes usar declaraciones else if para agregar condiciones adicionales. Se ejecutará el código dentro del primer bloque de condición verdadera encontrado y se ignorarán las condiciones posteriores.

Ejemplo: Declaración If-Else If

let grade = 85;if (grade >= 90) {  console.log("A");} else if (grade >= 80) {  console.log("B");} else if (grade >= 70) {  console.log("C");} else {  console.log("D");}

En este ejemplo, el código determina la calificación de un estudiante en función de su puntuación. Primero verifica si la calificación es mayor o igual a 90, y si es verdadero, registra “A”. Si no es así, pasa a la siguiente condición y verifica si la calificación es mayor o igual a 80, y así sucesivamente. Si ninguna de las condiciones es verdadera, registra “D”.

Declaraciones if Anidadas

También puedes anidar declaraciones if dentro de otras declaraciones if para crear estructuras de decisión más complejas. Cada declaración if dentro de la estructura anidada agrega una capa adicional de condiciones.

Ejemplo: Declaración if Anidada

let temperature = 25;let isSummer = true;if (isSummer) {  if (temperature > 30) {    console.log("¡Hace un día de verano caluroso!");  } else {    console.log("¡Es un día de verano cálido!");  }} else {  console.log("No es verano.");}

En este ejemplo, la declaración if externa verifica si es verano. Si es verdadero, ingresa a la estructura anidada y verifica la temperatura. Dependiendo de la temperatura, registra diferentes mensajes. Si no es verano, registra “No es verano”.

Operadores Lógicos en Declaraciones if

JavaScript proporciona operadores lógicos (&&, ||, !) que te permiten combinar múltiples condiciones en una sola declaración if.

Ejemplo: Operadores Lógicos

let age = 25;let hasLicense = true;if (age >= 18 && hasLicense) {  console.log("Eres elegible para conducir.");} else {  console.log("No eres elegible para conducir.");}

En este ejemplo, el operador && (Y lógico) combina dos condiciones: la edad de la persona que es mayor o igual a 18 años y tener una licencia válida. Si ambas condiciones son verdaderas, registra “Eres elegible para conducir”. De lo contrario, registra “No eres elegible para conducir”.

Declaraciones Switch

En situaciones en las que tienes múltiples condiciones posibles para verificar contra un solo valor, una declaración switch puede ser más concisa que una serie de declaraciones if-else if.

Ejemplo: Sentencia Switch

let dayOfWeek = "Miércoles";switch (dayOfWeek) {  case "Lunes":    console.log("Es el comienzo de la semana.");    break;  case "Miércoles":    console.log("Es el medio de la semana.");    break;  case "Viernes":    console.log("Ya casi es fin de semana.");    break;  default:    console.log("Es un día normal.");}

En este ejemplo, la sentencia switch verifica el valor de dayOfWeek y ejecuta el bloque de código correspondiente. Si ninguno de los casos coincide, se ejecuta el bloque default.

Errores Comunes con las Sentencias if

Al utilizar sentencias if, los principiantes suelen cometer algunos errores comunes. Veamos algunos de ellos:

Error 1: Olvidar el Operador de Igualdad

let x = 5;// Incorrectif (x = 10) {  console.log("x es 10.");}

El código anterior es incorrecto porque utiliza el operador de asignación = en lugar del operador de igualdad === dentro de la condición if. El código correcto debería ser if (x === 10).

Error 2: Colocar Incorrectamente las Llaves Curvas

let y = 15;// Incorrectif (y > 10)  console.log("y es mayor que 10");  console.log("Esta declaración no está dentro del bloque if");

En este ejemplo, solo la primera instrucción console.log forma parte del bloque if porque faltan las llaves curvas. Para incluir ambas instrucciones dentro del bloque if, utiliza llaves curvas:

if (y > 10) {  console.log("y es mayor que 10");  console.log("Esta declaración está dentro del bloque if");}

Error 3: Confundir = y ==

let z = "5";// Incorrectif (z = 5) {  console.log("z es 5.");}

El código anterior es incorrecto porque utiliza el operador de asignación = en lugar del operador de igualdad == dentro de la condición if. El código correcto debería ser if (z == 5).

Conclusión

Comprender y dominar las sentencias if es esencial para cualquier desarrollador de JavaScript. Estas sentencias condicionales proporcionan la lógica que permite que tus programas tomen decisiones y respondan dinámicamente a diferentes situaciones.

Ya sea que estés validando la entrada del usuario, controlando el flujo de tu aplicación o manejando diferentes casos, las sentencias if son una herramienta fundamental en tu arsenal de programación.

A medida que continúes tu viaje en el desarrollo de JavaScript, practica el uso de sentencias if en diversos escenarios. Experimenta con diferentes condiciones, estructuras anidadas y operadores lógicos para familiarizarte y ser competente en el uso de estas poderosas herramientas.

Con una sólida comprensión de las sentencias if, estarás bien equipado para construir aplicaciones web más dinámicas y receptivas.

• JavaScript