Declaración if…else en JavaScript

La declaración if...else en JavaScript es una de las estructuras de control que se utilizan para determinar el flujo de un programa. Esta herramienta permite ejecutar bloques de código en función de condiciones evaluadas, lo que la convierte en un elemento clave para construir lógica dinámica y adaptativa en cualquier aplicación.

Introducción a la declaración if

La declaración if evalúa una condición especificada dentro de los paréntesis. Si esta condición se resuelve como verdadera (true), se ejecuta el bloque de código asociado. En caso contrario, el flujo del programa continúa con la siguiente instrucción o estructura.

Su sintaxis básica es:

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

La condición dada puede ser un valor o una expresión. Normalmente, la condición se evalúa como un valor booleano (true o false). Si la condición se evalúa como true, la declaración if ejecuta el bloque. De lo contrario pasa el control a la siguiente declaración.

Cuando la condición no es estrictamente true o false, JavaScript aplica una conversión implícita utilizando el método Boolean(). A continuación, algunos valores y cómo se evalúan:

if ("JavaScript") {
  console.log("La cadena no está vacía"); // Esto se ejecutará
}

if (0) {
  console.log("Esto nunca se ejecutará"); // 0 se evalúa como false
}

Ejemplo básico: En el siguiente código, si la temperatura es mayor a 20, el mensaje “Hace calor” se imprimirá en la consola.

const temperatura = 25;

if (temperatura > 20) {
  console.log("Hace calor");
}

Bloques en JavaScript: Buenas Prácticas

Un bloque en JavaScript agrupa una o más instrucciones dentro de llaves {...}. Aunque una declaración if puede contener una sola instrucción sin llaves, es una buena práctica envolver siempre el código en un bloque para mejorar la claridad y prevenir errores comunes al agregar nuevas líneas.

Ejemplo sin llaves (poco recomendable):

if (true) 
  console.log("Se ejecuta"); // Solo esta línea está controlada por el if
  console.log("Siempre se ejecuta"); // No está asociada al if

Ejemplo con llaves (recomendado):

if (true) {
  console.log("Se ejecuta");
  console.log("Este bloque es claro y seguro");
}

Declaraciones if Anidadas

Las declaraciones if anidadas en JavaScript son una forma de controlar el flujo de un programa permitiendo que se ejecuten diferentes bloques de código dependiendo de múltiples condiciones.

if (condicion1) {
  // Se ejecuta si 'condicion1' es verdadera
  if (condicion2) {
     // Se ejecuta si 'condicion1' y 'condicion2' son verdaderas
  }
} 

La estructura de if anidados es simplemente una declaración if dentro de otra. Esto permite realizar comprobaciones más complejas y tomar decisiones basadas en múltiples criterios. Por ejemplo:

const age = 21;
const state = 'CA';

if (state == 'CA') {
  if (age >= 16) {
    console.log('Puedes conducir.');
  }
}

El anterior código comienza definiendo dos variables: age y state. La primera declaración if verifica si el valor de state es igual a 'CA'. Si esta condición se cumple se ejecuta el bloque de código dentro de este if. Dentro de este bloque hay otra declaración if que verifica si age es mayor o igual a 16. Si ambas condiciones se cumplen, se imprime el mensaje en consola.

En la práctica, debes evitar el uso de declaraciones if anidados tanto como sea posible. Es preferible combinar condiciones utilizando operadores lógicos, como en el siguiente ejemplo:

const age = 16;
const state = 'CA';

if (state === 'CA' && age >= 16) {
  console.log('Puedes conducir.');
}

Declaración else

La declaración if ejecuta un bloque de código si la condición es verdadera, mientras que else define una acción alternativa que se ejecutará cuando la condición no se cumpla. Esto permite manejar ambos escenarios en una sola estructura condicional, facilitando la toma de decisiones en el código.

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

Esta estructura te permite controlar el flujo de tu programa de manera más completa, permitiendo que se realicen diferentes acciones en función del resultado de la evaluación de la condición.

const age = 18;

if (age >= 18) {
  console.log('Puedes registrarte.');
} else {
  console.log('Debes tener al menos 18 años para registrarte.');
}

En el ejemplo anterior: la variable age tiene un valor de 18. luego en la estructura if la condición age >= 18 se evalúa como true, lo que significa que el usuario tiene al menos 18 años. Como resultado, se muestra el mensaje “Puedes registrarte.” en la consola. Si la edad fuera menor que 18, se ejecutaría el bloque de código dentro del else, mostrando el mensaje “Debes tener al menos 18 años para registrarte.”.

Ejemplo con operador lógico AND (&&)

El siguiente ejemplo utiliza un operador lógico AND (&&) como condición en el bloque if:

const age = 16;
const country = 'USA';

if (age >= 16 && country === 'USA') {
  console.log('Puedes obtener una licencia de conducir');
} else {
  console.log('No eres elegible para obtener una licencia de conducir');
}

En el anterior ejemplo, como la edad es 16 y el país es EE. UU., la condición age >= 16 && country === 'USA' devuelve true. Por lo tanto, se ejecuta el bloque if y se imprime el mensaje en la consola.

Ejemplo con operador lógico OR (||)

El operador lógico OR (||) se utiliza para verificar si al menos una de las condiciones es true:

const age = 15;
const hasParentalConsent = true;

if (age >= 18 || hasParentalConsent) {
  console.log('Puedes registrarte');
} else {
  console.log('No puedes registrarte');
}

En el anterior ejemplo, age es 15, pero hasParentalConsent es true. Debido a que una de las condiciones es true, se ejecuta el bloque if y se imprime “Puedes registrarte” en la consola.

Declaración else if

La declaración else if permite evaluar múltiples condiciones de forma secuencial. A diferencia de la simple declaración if...else, donde solo hay dos posibles caminos de ejecución (una para true y otra para false), la declaración else if añade más caminos posibles, lo que permite una lógica de decisiones más compleja y flexible.

La estructura básica de la declaración else if es la siguiente:

if (condition1) {
  // Se ejecuta si condition1 es true
} else if (condition2) {
  // Se ejecuta si condition2 es true
} else if (condition3) {
  // Se ejecuta si condition3 es true
} else {
  // Se ejecuta si ninguna de las condiciones anteriores es true
}

Cada condición es evaluada en orden. Si una condición es true, el bloque de código correspondiente se ejecuta y el resto de las condiciones se omiten.

Ejemplo de declaración else if

El siguiente ejemplo utiliza else if para determinar el rango de edad de una persona y mostrar un mensaje correspondiente:

const temp = 28; // Temperatura en grados Celsius

if (temp < 10) {
  console.log('Hace frío. Abrígate bien.');
} else if (temp >= 10 && temp < 20) {
  console.log('La temperatura es agradable. Disfruta del día.');
} else if (temp >= 20 && temp < 30) {
  console.log('Hace calor. Busca un poco de sombra.');
} else {
  console.log('¡Es un día muy caluroso! Mantente hidratado.');
}

Conclusión

En este artículo exploramos el uso de la declaración if...else en JavaScript para ejecutar bloques de código basados en condiciones. La declaración if se utiliza para ejecutar un bloque si una condición es verdadera, mientras que la declaración else permite ejecutar un bloque alternativo si la condición es falsa.