Condicionales if, else if y else

¿Qué son los condicionales?

Imagina que estás programando un sistema de recomendaciones para una tienda en línea. Cuando un cliente compra más de 100 dólares, quieres ofrecerle un descuento del 10%. Si compra más de 200 dólares, el descuento sube al 20%. Y si no llega a 100 dólares, simplemente le muestras el precio normal. ¿Cómo haces esto en código? Con los condicionales.

Los condicionales son estructuras de control que evalúan una expresión y, dependiendo de si es verdadera (true) o falsa (false), ejecutan un bloque de código u otro. En JavaScript, la estructura básica se compone de tres palabras clave: if, else if y else.

La estructura básica: if

El condicional if es la estructura más simple. Evalúa una condición entre paréntesis y, si es verdadera, ejecuta el bloque de código entre las llaves.

let edad = 18;

if (edad >= 18) {
  console.log("Eres mayor de edad");
}

// Salida: "Eres mayor de edad"

En este ejemplo, la condición edad >= 18 se evalúa como verdadera porque edad es 18, por lo tanto, el mensaje se imprime en la consola.

Manejando el caso contrario: else

¿Y qué pasa cuando la condición es falsa? Aquí entra en juego else. El bloque else se ejecuta únicamente cuando la condición del if es falsa.

let temperatura = 15;

if (temperatura > 30) {
  console.log("Hace mucho calor");
} else {
  console.log("El clima es agradable o frío");
}

// Salida: "El clima es agradable o frío"

En este caso, como 15 no es mayor que 30, la condición es falsa, por lo que se ejecuta el bloque del else.

Evaluando múltiples condiciones: else if

A veces necesitas evaluar más de dos situaciones. Para eso existe else if, que te permite encadenar múltiples condiciones una tras otra.

let calificacion = 85;

if (calificacion >= 90) {
  console.log("Excelente");
} else if (calificacion >= 80) {
  console.log("Muy bien");
} else if (calificacion >= 70) {
  console.log("Bien");
} else if (calificacion >= 60) {
  console.log("Suficiente");
} else {
  console.log("Necesitas mejorar");
}

// Salida: "Muy bien"

Ejemplo práctico: Sistema de envío

Vamos a crear un ejemplo completo que simule un sistema de cálculo de costos de envío:

1. Declaramos una variable para el total de la compra
2. Evaluamos diferentes rangos de compra
3. Aplicamos la lógica de envío correspondiente

let totalCompra = 150;
let costoEnvio;

if (totalCompra >= 200) {
  costoEnvio = 0;
  console.log("¡Envío gratis!");
} else if (totalCompra >= 100) {
  costoEnvio = 5.99;
  console.log("Envío reducido: $5.99");
} else {
  costoEnvio = 12.99;
  console.log("Envío estándar: $12.99");
}

console.log("Costo final: $" + (totalCompra + costoEnvio));
// Salida: "Envío reducido: $5.99"
// Salida: "Costo final: $155.99"

Operadores de comparación

Para escribir condiciones efectivas, necesitas conocer los operadores de comparación disponibles en JavaScript:

Condiciones compuestas con operadores lógicos

Puedes combinar múltiples condiciones usando operadores lógicos: && (AND), || (OR) y ! (NOT).

let edad = 25;
let tieneCredencial = true;

if (edad >= 18 && tieneCredencial) {
  console.log("Puedes entrar al evento");
} else {
  console.log("No cumples los requisitos");
}

// Salida: "Puedes entrar al evento"

Anidamiento de condicionales

Puedes colocar condicionales dentro de otros condicionales. Esto se conoce como anidamiento y es útil para situaciones más complejas.

let usuario = {
  nombre: "María",
  esMiembro: true,
  puntos: 450
};

if (usuario.esMiembro) {
  console.log("Bienvenida, " + usuario.nombre);
  
  if (usuario.puntos >= 500) {
    console.log("Tienes acceso VIP");
  } else {
    console.log("Tienes acceso estándar");
  }
} else {
  console.log("Regístrate para obtener beneficios");
}

// Salida: "Bienvenida, María"
// Salida: "Tienes acceso estándar"

El buen código no es solo el que funciona, sino el que otros pueden entender y mantener fácilmente.

El operador ternario: alternativa rápida

Para condiciones simples de una sola línea, JavaScript ofrece el operador ternario, una forma más compacta de escribir un if-else.

// Forma tradicional con if-else
let estado;
if (edad >= 18) {
  estado = "adulto";
} else {
  estado = "menor";
}

// Forma con operador ternario
let estado = (edad >= 18) ? "adulto" : "menor";

// La sintaxis es: condición ? valorSiVerdadero : valorSiFalso

Comparación de estructuras

Errores comunes que debes evitar

1. Olvidar las llaves: Especialmente cuando agregas más líneas de código después, las llaves son cruciales.
2. Confundir = con ===: Un solo = asigna valor, === compara. Este error puede causar bugs difíciles de detectar.
3. Condiciones con efectos secundarios: Evita modificar variables dentro de las condiciones, esto hace el código confuso.
4. Orden incorrecto: Recuerda que else if se evalúa en orden. Coloca las condiciones más específicas primero.