Condicionales

Los programas toman decisiones todo el tiempo: "si el usuario no ha iniciado sesión, muéstrale el botón de entrar", "si el carrito supera $999, el envío es gratis", "si es fin de semana, aplica otra tarifa". En esta lección aprenderás todas las formas de tomar decisiones en JavaScript y, sobre todo, a escribirlas de forma limpia y fácil de leer.

Concepto

Una condicional es como un cruce de caminos: el programa evalúa una pregunta cuya respuesta es true o false y, según el resultado, toma un camino u otro.

          ¿Llueve?
         /        \
      sí            no
      ↓              ↓
  Llevar paraguas   Llevar lentes de sol

En JavaScript tienes varias herramientas para esto:

• if / else / else if: la más versátil.
• switch: cuando comparas un valor contra muchas opciones fijas.
• Ternario ? :: para elegir entre dos valores en una línea.
• Guard clauses y lookup objects: patrones profesionales para código más limpio.

if, else y else if

const total = 1200;

// if simple: se ejecuta sólo si la condición es verdadera
if (total > 999) {
  console.log('¡Tienes envío gratis! 🚚');
}

// if...else: uno de los dos caminos siempre se ejecuta
const stock = 0;
if (stock > 0) {
  console.log('Disponible');
} else {
  console.log('Agotado');
}

// else if: varias condiciones en orden
const calificacion = 8.5;

if (calificacion >= 9) {
  console.log('Excelente');
} else if (calificacion >= 8) {
  console.log('Muy bien');       // ← se ejecuta este
} else if (calificacion >= 6) {
  console.log('Aprobado');
} else {
  console.log('Reprobado');
}

JavaScript evalúa las condiciones de arriba hacia abajo y se detiene en la primera que sea verdadera. Por eso el orden importa.

Error común

Poner las condiciones en el orden equivocado:

const calificacion = 9.5;

// ❌ Siempre entra en el primero, porque 9.5 también es >= 6
if (calificacion >= 6) {
  console.log('Aprobado');
} else if (calificacion >= 9) {
  console.log('Excelente'); // nunca se ejecuta
}

Ordena de la condición más específica a la más general.

Condiciones combinadas

Usa los operadores lógicos que viste en Operadores:

const edad = 22;
const tieneBoleto = true;
const esHoraDeApertura = true;

if (edad >= 18 && tieneBoleto && esHoraDeApertura) {
  console.log('Bienvenido al concierto 🎸');
}

const dia = 'sábado';
if (dia === 'sábado' || dia === 'domingo') {
  console.log('Horario de fin de semana: 10:00 a 14:00');
}

Aprovechar truthy y falsy

const nombre = '';
const carrito = [];

if (!nombre) {
  console.log('Escribe tu nombre');
}

// Ojo: un array vacío es truthy, revisa su longitud
if (carrito.length === 0) {
  console.log('Tu carrito está vacío');
}

switch

Útil cuando comparas un mismo valor contra varias opciones exactas:

const metodoPago = 'oxxo';

switch (metodoPago) {
  case 'tarjeta':
    console.log('Procesando pago con tarjeta...');
    break;
  case 'paypal':
    console.log('Redirigiendo a PayPal...');
    break;
  case 'oxxo':
    console.log('Generando ficha de pago OXXO...'); // ← se ejecuta este
    break;
  case 'transferencia':
  case 'spei':
    // Dos casos comparten el mismo código
    console.log('Mostrando datos bancarios...');
    break;
  default:
    console.log('Método de pago no válido');
}

• switch compara con === (igualdad estricta).
• break termina el switch. Si lo olvidas, se ejecutan también los casos siguientes (esto se llama fall-through).
• default se ejecuta si ningún caso coincide (como el else).

Error común

Olvidar el break:

const rol = 'editor';
switch (rol) {
  case 'editor':
    console.log('Puede editar');
  case 'admin':
    console.log('Puede borrar todo'); // 😱 también se ejecuta
    break;
}

Operador ternario

Para elegir entre dos valores:

const hora = 20;
const saludo = hora < 12 ? 'Buenos días' : 'Buenas noches';

// Ideal para textos y clases CSS
const enStock = false;
const textoBoton = enStock ? 'Agregar al carrito' : 'Avísame cuando llegue';
const claseBoton = enStock ? 'btn-primario' : 'btn-deshabilitado';

Buena práctica

Usa el ternario para asignar valores, no para ejecutar lógica compleja. Y evita anidarlos: un ternario dentro de otro es muy difícil de leer.

// ❌ Difícil de leer
const nivel = puntos > 100 ? 'oro' : puntos > 50 ? 'plata' : 'bronce';

// ✅ Mejor con if/else o un guard clause dentro de una función

Guard clauses (cláusulas de guarda)

Es un patrón profesional: en lugar de anidar if dentro de if, revisa primero los casos inválidos y sal de la función con return. El "camino feliz" queda al final, sin sangrías.

// ❌ "Pirámide de la perdición": difícil de seguir
function procesarPedido(pedido) {
  if (pedido) {
    if (pedido.productos.length > 0) {
      if (pedido.pagado) {
        console.log('Enviando pedido...');
      } else {
        console.log('Falta el pago');
      }
    } else {
      console.log('El pedido está vacío');
    }
  } else {
    console.log('No hay pedido');
  }
}

// ✅ Con guard clauses: plano y claro
function procesarPedidoLimpio(pedido) {
  if (!pedido) return console.log('No hay pedido');
  if (pedido.productos.length === 0) return console.log('El pedido está vacío');
  if (!pedido.pagado) return console.log('Falta el pago');

  // Si llegamos aquí, todo está bien
  console.log('Enviando pedido...');
}

procesarPedidoLimpio({ productos: ['Taza'], pagado: true }); // Enviando pedido...

Aprenderás más sobre funciones y return en Funciones.

Lookup objects (objetos de búsqueda)

Cuando tienes muchos if o case que sólo traducen un valor en otro, un objeto es más corto y fácil de mantener:

// ❌ Muchos casos repetitivos
function costoEnvio(estado) {
  switch (estado) {
    case 'CDMX': return 99;
    case 'Jalisco': return 129;
    case 'Nuevo León': return 139;
    default: return 199;
  }
}

// ✅ Lookup object
const COSTOS_ENVIO = {
  'CDMX': 99,
  'Jalisco': 129,
  'Nuevo León': 139,
};

function costoEnvioLimpio(estado) {
  return COSTOS_ENVIO[estado] ?? 199; // 199 si el estado no está en la lista
}

console.log(costoEnvioLimpio('Jalisco'));  // 129
console.log(costoEnvioLimpio('Yucatán'));  // 199

También puedes guardar funciones como valores:

const acciones = {
  sumar: (a, b) => a + b,
  restar: (a, b) => a - b,
  multiplicar: (a, b) => a * b,
};

const operacion = 'multiplicar';
console.log(acciones[operacion](4, 5)); // 20

Agregar un nuevo estado o acción es tan fácil como añadir una línea al objeto. Lo verás más a fondo en Objetos.

Casos de uso reales

// 1. Mostrar mensaje según el estado de un pedido
const ESTADOS = {
  pendiente: '⏳ Esperando pago',
  pagado: '✅ Pago recibido',
  enviado: '🚚 En camino',
  entregado: '📦 Entregado',
};
const estadoPedido = 'enviado';
console.log(ESTADOS[estadoPedido] ?? 'Estado desconocido');

// 2. Descuento escalonado
function calcularDescuento(total) {
  if (total >= 5000) return 0.15;
  if (total >= 2000) return 0.10;
  if (total >= 1000) return 0.05;
  return 0;
}
console.log(calcularDescuento(2500)); // 0.1

// 3. Validar un campo de formulario
function validarEmail(email) {
  if (!email) return 'El correo es obligatorio';
  if (!email.includes('@')) return 'El correo no es válido';
  return ''; // sin errores
}
console.log(validarEmail('ana.gmail.com')); // "El correo no es válido"

En la lección de Operadores tienes una demo interactiva de una calculadora de IMC que clasifica el resultado con if / else if / else, exactamente como el ejemplo de calificaciones.

Ejercicios

1. Escribe una función clasificarTemperatura(grados) que devuelva 'Frío' (menos de 15), 'Templado' (15 a 25) o 'Calor' (más de 25).
2. Usa switch para convertir un número del 1 al 7 en el nombre del día (1 = lunes). Si el número no es válido, devuelve 'Día inválido'.
3. Reescribe el ejercicio 2 usando un lookup object (o un array).
4. Escribe puedeComprar(usuario) con guard clauses: debe devolver un mensaje si no hay usuario, si no está verificado o si su saldo es 0; si todo está bien, devuelve 'Compra autorizada'.

Ver solución

1.

function clasificarTemperatura(grados) {
  if (grados < 15) return 'Frío';
  if (grados <= 25) return 'Templado';
  return 'Calor';
}
console.log(clasificarTemperatura(30)); // "Calor"

2.

function nombreDia(numero) {
  switch (numero) {
    case 1: return 'Lunes';
    case 2: return 'Martes';
    case 3: return 'Miércoles';
    case 4: return 'Jueves';
    case 5: return 'Viernes';
    case 6: return 'Sábado';
    case 7: return 'Domingo';
    default: return 'Día inválido';
  }
}

Como usamos return, no hace falta break: return sale de la función inmediatamente.

3.

const DIAS = {
  1: 'Lunes', 2: 'Martes', 3: 'Miércoles', 4: 'Jueves',
  5: 'Viernes', 6: 'Sábado', 7: 'Domingo',
};

function nombreDia(numero) {
  return DIAS[numero] ?? 'Día inválido';
}
console.log(nombreDia(5)); // "Viernes"

4.

function puedeComprar(usuario) {
  if (!usuario) return 'Debes iniciar sesión';
  if (!usuario.verificado) return 'Verifica tu correo primero';
  if (usuario.saldo <= 0) return 'Saldo insuficiente';
  return 'Compra autorizada';
}

console.log(puedeComprar({ verificado: true, saldo: 500 })); // "Compra autorizada"

Resumen

• if / else if / else evalúa condiciones en orden y ejecuta la primera verdadera.
• Ordena de lo más específico a lo más general.
• switch compara con ===; no olvides el break (o usa return).
• El ternario sirve para elegir entre dos valores; no lo anides.
• Las guard clauses eliminan anidamientos: valida y sal temprano con return.
• Los lookup objects reemplazan cadenas largas de if/switch que traducen valores.

Siguiente: Bucles