Condicionales en JavaScript

if — la decisión básica

Ejecuta un bloque de código solo si la condición es verdadera. En JavaScript las llaves {} delimitan el bloque — la indentación es recomendada pero no obligatoria.

const edad = 20;

if (edad >= 18) {
    document.getElementById("msg").innerHTML = "Sos mayor de edad";
}

// Sin else — si la condición no se cumple, no pasa nada
const temperatura = 10;
if (temperatura > 30) {
    console.log("Hace mucho calor");
}
// (no se ejecuta nada)

if / else if / else

Cuando hay más de dos posibilidades, encadenás else if. Solo se ejecuta el primer bloque cuya condición sea verdadera.

const nota = 75;
let calificacion;

if (nota >= 90) {
    calificacion = "Sobresaliente";
} else if (nota >= 80) {
    calificacion = "Notable";
} else if (nota >= 70) {
    calificacion = "Bien";
} else if (nota >= 60) {
    calificacion = "Aprobado";
} else {
    calificacion = "Desaprobado";
}

document.getElementById("resultado").innerHTML = calificacion; // "Bien"

Operadores de comparación y lógicos

const edad      = 25;
const tieneDNI  = true;

// AND — ambas condiciones
if (edad >= 18 && tieneDNI) {
    console.log("Puede votar");
}

// OR — al menos una
const dia = "sábado";
if (dia === "sábado" || dia === "domingo") {
    console.log("Es fin de semana");
}

// NOT
const logueado = false;
if (!logueado) {
    console.log("Por favor iniciá sesión");
}

Operador ternario

Una forma compacta de escribir un if/else en una línea. Ideal para asignaciones simples.

// condicion ? valorSiTrue : valorSiFalse

const edad    = 20;
const estado  = edad >= 18 ? "mayor" : "menor";
// "mayor"

const precio  = 1000;
const descuento = precio > 500 ? 0.20 : 0.10;
const total   = precio * (1 - descuento);
// 800

// Dentro de un template literal
document.getElementById("msg").innerHTML =
    `Sos ${edad >= 18 ? "mayor" : "menor"} de edad.`;

switch

Cuando comparás una variable contra múltiples valores exactos, switch es más claro que varios else if. Cada case necesita un break para evitar que "caiga" al siguiente.

const dia = "lunes";
let tipo;

switch (dia) {
    case "lunes":
    case "martes":
    case "miércoles":
    case "jueves":
    case "viernes":
        tipo = "Día hábil";
        break;
    case "sábado":
    case "domingo":
        tipo = "Fin de semana";
        break;
    default:
        tipo = "Día desconocido";
}

console.log(tipo); // "Día hábil"

Operadores de cortocircuito — && y ||

Además de usarse en condiciones, && y || se usan para asignaciones y valores por defecto:

// || como valor por defecto
const nombre = "" || "Anónimo";       // "Anónimo" (porque "" es falsy)
const usuario = null || "invitado";   // "invitado"

// ?? (nullish coalescing) — solo null/undefined, no falsy
const nombre2 = "" ?? "Anónimo";     // "" (el string vacío no es null/undefined)
const valor   = null ?? "defecto";   // "defecto"

// && para ejecutar algo solo si la condición se cumple
const logueado = true;
logueado && mostrarMenu();  // llama a mostrarMenu() solo si logueado es true

// Encadenamiento opcional ?.
const usuario2 = null;
console.log(usuario2?.nombre);  // undefined (no lanza error)

Buenas Prácticas

• Siempre === en vez de ==: evitás conversiones de tipo inesperadas
• Ternario para asignaciones simples: si hay lógica compleja, usá if/else
• switch para múltiples valores exactos: más claro que muchos else if
• No olvidés el break en switch: sin él el código "cae" al siguiente case
• ?? en vez de || para defaults: si querés aceptar 0 o "" como valores válidos
• Llaves siempre en if/else: aunque el bloque sea de una línea, las llaves evitan errores al agregar más código después