Condicionales en JavaScript: if, else y cómo hacer que tu código tome decisiones

Si ya has trasteado con variables y tipos de datos, el siguiente paso natural es enseñarle a tu código a decidir por sí mismo: mostrar un mensaje u otro según la hora, cambiar el comportamiento de un formulario según lo que ha escrito el usuario, o ejecutar una función solo si se cumple una condición. Eso es justo lo que hacen los condicionales, y es la pieza que le faltaba a lo que ya sabes para escribir programas que reaccionen a datos reales en vez de hacer siempre lo mismo.

En el artículo anterior dejamos una pregunta pendiente: qué diferencia hay entre == y ===. La resolvemos aquí, junto con todo lo necesario para usar if, else, switch y el operador ternario con soltura.

Qué es un condicional y por qué lo necesitas

Un condicional es una instrucción que le dice a tu código: "si se cumple esto, haz esto otro; si no, haz aquello". Sin condicionales, un programa ejecuta sus líneas de arriba a abajo siempre igual, pase lo que pase. Con condicionales, tu código empieza a tomar decisiones según los datos que tiene en cada momento, que es básicamente lo que hace cualquier aplicación real: comprobar si un usuario ha iniciado sesión, validar que un formulario no esté vacío, o decidir qué mostrar en pantalla según el dispositivo.

if, else y else if: la estructura básica

La forma más común de escribir un condicional es if:

let hora = 20;

if (hora < 12) {
  console.log("Buenos días");
} else if (hora < 20) {
  console.log("Buenas tardes");
} else {
  console.log("Buenas noches");
}
// Buenas noches

La condición entre paréntesis siempre se evalúa como true o false. Si es true, se ejecuta el bloque entre llaves; si no, JavaScript pasa a comprobar el siguiente else if, y si ninguno se cumple, ejecuta el else final (que es opcional). Puedes encadenar tantos else if como necesites, pero si son muchos y todos comparan la misma variable con valores distintos, más adelante verás que switch suele quedar más limpio.

La condición siempre acaba siendo un boolean

Recuerda que true y false son justo el tipo boolean del que ya hablamos al ver los tipos de datos. Un condicional no es más que preguntarle a JavaScript: "¿esta expresión es true o false?", y actuar según la respuesta.

Comparar valores: por qué usar === y no ==

Para construir esas condiciones vas a usar operadores de comparación: >, <, >=, <=, y los de igualdad, == y ===. Aquí está la trampa que casi todo el mundo pisa al empezar: == compara los valores intentando convertir el tipo si son distintos (lo que se llama coerción de tipos), mientras que === compara valor y tipo a la vez, sin convertir nada.

La recomendación casi universal (incluida la de la documentación de MDN) es usar siempre === y !==. Así evitas resultados sorprendentes cuando un número te llega como texto, algo que ya vimos que pasa a menudo con datos de un formulario o una API.

Truthy y falsy: cuando la condición no es una comparación directa

No siempre vas a comparar dos valores con > o ===. Muchas veces vas a poner directamente una variable dentro del if, y JavaScript decide si esa variable "cuenta" como verdadera o como falsa. Solo hay seis valores que se consideran falsy (se comportan como false):

• false
• 0
• "" (texto vacío)
• null
• undefined
• NaN

Todo lo demás es truthy (se comporta como true), incluyendo cadenas con contenido, cualquier número distinto de 0 y los objetos:

let nombre = "";

if (nombre) {
  console.log("Hola, " + nombre);
} else {
  console.log("No has escrito tu nombre");
}
// No has escrito tu nombre, porque "" es falsy

Este patrón es muy habitual para comprobar si una variable "tiene algo" antes de usarla, sin necesidad de escribir nombre !== "" explícitamente.

Combinar condiciones: &&, || y !

Cuando una decisión depende de más de una cosa, combinas condiciones con operadores lógicos:

let edad = 20;
let tieneCarnet = true;

if (edad >= 18 && tieneCarnet) {
  console.log("Puede conducir");
}

if (edad < 18 || !tieneCarnet) {
  console.log("No puede conducir todavía");
}

&& (Y) exige que ambas condiciones sean true; || (O) exige que al menos una lo sea; ! (NO) invierte un valor booleano. Un error muy típico al empezar es escribir algo como if (x === 5 || 7) pensando que compara x con 5 o con 7. En realidad JavaScript evalúa 7 como una expresión suelta, y como 7 es truthy, la condición es true siempre. La forma correcta es repetir la variable en cada comparación: if (x === 5 || x === 7).

El operador ternario: if/else en una sola línea

Cuando el if/else solo sirve para decidir entre dos valores, el operador ternario suele ser más rápido de leer:

let edad = 16;
let entrada = edad >= 18 ? "Adulto" : "Menor";
console.log(entrada); // "Menor"

La estructura es condición ? valor_si_true : valor_si_false. Es especialmente útil para asignar directamente el resultado a una variable, pero si el if/else tiene varias líneas de lógica dentro, no fuerces el ternario solo por acortar: prioriza que se entienda.

switch: cuando comparas la misma variable con muchos valores

Si te encuentras encadenando muchos else if que comparan la misma variable, switch es más ordenado:

let dia = "martes";

switch (dia) {
  case "sabado":
  case "domingo":
    console.log("Es fin de semana");
    break;
  case "martes":
    console.log("Es martes");
    break;
  default:
    console.log("Es un día entre semana");
}

Cada case se compara con === (sin coerción de tipos), y el break es el que le dice a JavaScript que pare ahí: si lo olvidas, la ejecución sigue "cayendo" hacia el siguiente case aunque no coincida, un fallo llamado fall-through que suele colarse sin avisar. Fíjate en "sabado" y "domingo": al no poner break entre ellos a propósito, ambos ejecutan el mismo código, que es una forma habitual de agrupar varios casos.

Errores típicos al empezar

• Confundir =, == y ===. Un único = asigna un valor, no compara nada; dentro de un if casi siempre querrás ===.
• Olvidar el break en un switch. Provoca que se ejecuten casos que no tocaban.
• Confiar en == sin darte cuenta. Funciona "por casualidad" en muchos casos hasta que un dato llega con un tipo inesperado y deja de funcionar.
• El truco del || con varios valores sueltos. if (x === 5 || 7) no hace lo que parece; repite la variable en cada comparación.
• Olvidar las llaves {} en bloques de varias líneas. Sin ellas, solo la primera línea después del if pertenece al condicional, y es fácil dar por hecho que hay más código dentro cuando no lo hay.

En resumen

• if, else y else if hacen que tu código tome decisiones según si una condición es true o false.
• Usa siempre === y !== en vez de == y != para evitar la coerción de tipos y sus sorpresas.
• Solo false, 0, "", null, undefined y NaN son falsy; todo lo demás es truthy.
• Combina condiciones con &&, || y !, repitiendo siempre la variable en cada comparación.
• El operador ternario (condición ? a : b) es una forma corta de escribir un if/else de dos opciones.
• switch ordena mejor que una cadena larga de else if cuando comparas la misma variable con muchos valores, pero no olvides el break.

Con esto ya puedes escribir código que reacciona a datos reales en vez de hacer siempre lo mismo. En el próximo artículo de esta serie seguimos con funciones, para dejar de repetir bloques de condicionales y empezar a organizarlos en piezas reutilizables. Mientras tanto, si vas a apoyarte en un asistente de IA para revisar tu lógica mientras practicas esto, te interesa cómo usarla sin dejar de aprender de verdad, y si todavía no te manejas con la terminal para probar estos ejemplos con node, tenemos una guía de comandos de terminal que te puede venir bien.