JavaScript: condicionales para decisiones de interfaz

Una interfaz no es inteligente porque tenga muchos botones, colores o efectos. Empieza a sentirse inteligente cuando responde de forma adecuada a lo que ocurre: si falta un dato, avisa; si una nota no alcanza, sugiere reforzar; si una compra supera cierto monto, aplica un descuento; si el usuario ya completo una accion, cambia el mensaje.

Ese tipo de comportamiento nace de una idea muy sencilla: tomar decisiones. En JavaScript, las decisiones se expresan con condicionales. Son estructuras que permiten ejecutar un bloque de codigo solo cuando se cumple una condicion.

En el capitulo anterior trabajamos variables, tipos y conversiones. Ahora usaremos esa base para que la interfaz deje de ser una pantalla pasiva y empiece a reaccionar con criterio.

Que aprenderas hoy

• Usar if, else if y else para tomar decisiones.
• Comparar valores con operadores como ===, >, < y >=.
• Combinar condiciones con &&, || y !.
• Entender valores truthy y falsy sin caer en trampas frecuentes.
• Aplicar condicionales a mensajes, clases CSS y validaciones de formularios.

Por que importan los condicionales en interfaces

Cuando desarrollamos interfaces, casi todo depende de estados. Un formulario puede estar vacio, incompleto o correcto. Un boton puede estar habilitado o deshabilitado. Una tarjeta puede aparecer como pendiente, aprobada o con error. Una alerta puede ser informativa, positiva o critica.

Si no usamos condicionales, la interfaz muestra lo mismo para todos los casos. Eso obliga al usuario a interpretar demasiado. En cambio, cuando programamos buenas decisiones, la pantalla acompana: indica que falta, confirma lo logrado y reduce errores.

El objetivo no es llenar el codigo de reglas sin orden. El objetivo es convertir condiciones reales del usuario en respuestas claras de la interfaz.

La estructura basica: if, else if y else

La estructura if evalua una condicion. Si la condicion es verdadera, ejecuta un bloque de codigo. Si no lo es, puede pasar a otra condicion o ejecutar una alternativa.

const nota = 16;

if (nota >= 13) {
  console.log("Aprobado");
} else {
  console.log("Debe reforzar");
}

En este ejemplo, la decision es sencilla: si la nota es mayor o igual a 13, el estudiante aprueba. Si no, debe reforzar. Esa misma logica puede convertirse luego en un mensaje dentro de una pagina.

Cuando existen mas de dos posibilidades, usamos else if.

const porcentaje = 82;

if (porcentaje >= 90) {
  console.log("Excelente");
} else if (porcentaje >= 70) {
  console.log("Buen avance");
} else if (porcentaje >= 50) {
  console.log("En proceso");
} else {
  console.log("Necesita acompanamiento");
}

El orden importa. JavaScript evalua de arriba hacia abajo y se queda con la primera condicion verdadera. Por eso las condiciones mas exigentes suelen ir primero.

Comparar bien: === antes que ==

Para comparar valores, JavaScript ofrece distintos operadores. En interfaces, los mas comunes son:

• ===: igual en valor y tipo.
• !==: diferente en valor o tipo.
• > y <: mayor que y menor que.
• >= y <=: mayor o igual, menor o igual.

Como regla practica, usa === en lugar de ==. La comparacion estricta evita conversiones automaticas que pueden producir resultados inesperados.

console.log("5" == 5);  // true
console.log("5" === 5); // false

La primera comparacion devuelve true porque JavaScript convierte antes de comparar. La segunda devuelve false porque un texto no es lo mismo que un numero.

Ejemplo basico: validar una edad

Supongamos que tenemos un campo donde el usuario escribe su edad. Como vimos antes, el valor de un input llega como texto. Primero convertimos, luego decidimos.

<label for="age">Edad</label>
<input id="age" type="number" min="0">
<button id="check-age" type="button">Validar</button>
<p id="age-message"></p>

const ageInput = document.querySelector("#age");
const button = document.querySelector("#check-age");
const message = document.querySelector("#age-message");

button.addEventListener("click", function () {
  const age = Number(ageInput.value);

  if (!Number.isFinite(age) || ageInput.value === "") {
    message.textContent = "Ingresa una edad valida.";
  } else if (age < 18) {
    message.textContent = "Contenido disponible para mayores de edad.";
  } else {
    message.textContent = "Puedes continuar.";
  }
});

Observa que no preguntamos solamente si la edad es menor que 18. Primero verificamos si el valor realmente puede usarse como numero. Esa pequena decision mejora mucho la experiencia.

Condiciones compuestas: &&, || y !

Muchas decisiones de interfaz dependen de mas de una condicion. Para eso usamos operadores logicos.

• && significa "y": ambas condiciones deben cumplirse.
• || significa "o": basta con que una condicion se cumpla.
• ! niega una condicion.

const email = "alumno@idat.edu.pe";
const password = "12345678";

if (email !== "" && password.length >= 8) {
  console.log("Formulario listo para enviar");
} else {
  console.log("Revisa tus datos");
}

Aqui se exige que el email no este vacio y que la contrasena tenga al menos ocho caracteres. Si una de las dos condiciones falla, el formulario no deberia enviarse.

Truthy y falsy: cuando JavaScript interpreta valores

En JavaScript, algunos valores se comportan como falsos cuando se evaluan en una condicion. Se les conoce como valores falsy. Entre los mas comunes estan false, 0, "", null, undefined y NaN.

const nombre = "";

if (nombre) {
  console.log("Hola, " + nombre);
} else {
  console.log("Escribe tu nombre");
}

Como nombre es una cadena vacia, la condicion se interpreta como falsa. Esto puede ser util, pero tambien puede esconder errores si no somos cuidadosos.

Por ejemplo, el numero 0 es falsy. Si una nota puede ser cero, no conviene validar solamente con if (nota), porque cero tambien es una nota posible.

const nota = 0;

if (Number.isFinite(nota)) {
  console.log("Nota registrada");
} else {
  console.log("Nota invalida");
}

Ejemplo mejorado: mensaje y clase visual

Una buena interfaz no solo muestra texto. Tambien usa color, contraste y estado visual para reforzar el mensaje. Veamos un ejemplo con una nota academica.

<label for="score">Nota final</label>
<input id="score" type="number" min="0" max="20">
<button id="evaluate-score" type="button">Evaluar</button>
<p id="score-result" class="result"></p>

.result {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: 700;
}

.result-success {
  background: #e8f8ef;
  color: #146c43;
}

.result-warning {
  background: #fff4d6;
  color: #8a5a00;
}

.result-error {
  background: #fde8e8;
  color: #9b1c1c;
}

const scoreInput = document.querySelector("#score");
const evaluateButton = document.querySelector("#evaluate-score");
const result = document.querySelector("#score-result");

evaluateButton.addEventListener("click", function () {
  const score = Number(scoreInput.value);

  result.className = "result";

  if (!Number.isFinite(score) || scoreInput.value === "") {
    result.textContent = "Ingresa una nota valida.";
    result.classList.add("result-error");
  } else if (score < 0 || score > 20) {
    result.textContent = "La nota debe estar entre 0 y 20.";
    result.classList.add("result-error");
  } else if (score >= 13) {
    result.textContent = "Aprobado. Buen trabajo.";
    result.classList.add("result-success");
  } else {
    result.textContent = "Aun no aprueba. Necesita reforzar.";
    result.classList.add("result-warning");
  }
});

Este ejemplo ya se parece mas a una interfaz real: valida entrada vacia, evita valores fuera de rango, diferencia error de advertencia y usa clases CSS para comunicar el estado.

Variante profesional: separar la decision del renderizado

Cuando el codigo crece, conviene separar la logica que decide del codigo que pinta la interfaz. Esto hace que cada parte sea mas facil de leer y probar.

function getScoreStatus(score) {
  if (!Number.isFinite(score)) {
    return {
      message: "Ingresa una nota valida.",
      className: "result-error"
    };
  }

  if (score < 0 || score > 20) {
    return {
      message: "La nota debe estar entre 0 y 20.",
      className: "result-error"
    };
  }

  if (score >= 13) {
    return {
      message: "Aprobado. Buen trabajo.",
      className: "result-success"
    };
  }

  return {
    message: "Aun no aprueba. Necesita reforzar.",
    className: "result-warning"
  };
}

function renderScoreStatus(status) {
  result.className = "result";
  result.classList.add(status.className);
  result.textContent = status.message;
}

evaluateButton.addEventListener("click", function () {
  const score = Number(scoreInput.value);
  const status = getScoreStatus(score);

  renderScoreStatus(status);
});

La funcion getScoreStatus decide. La funcion renderScoreStatus muestra. Esta separacion parece pequena, pero prepara el camino para proyectos mas grandes: CRUD con JSON, validaciones de formularios y componentes en React.

El operador ternario: util, pero con moderacion

JavaScript tambien tiene el operador condicional, conocido como ternario. Sirve para devolver un valor segun una condicion.

const score = 15;
const label = score >= 13 ? "Aprobado" : "Debe reforzar";

console.log(label);

El ternario es practico para decisiones cortas. Pero si la condicion tiene varias ramas o requiere muchas acciones, es mejor usar if. La claridad manda.

Errores comunes

• Usar = cuando querias comparar con ===.
• Comparar textos numericos sin convertirlos antes.
• Confiar demasiado en valores truthy y falsy.
• Escribir condiciones en un orden que bloquea casos especificos.
• Mezclar en un solo bloque lectura de datos, validacion, calculo y renderizado.
• Mostrar mensajes genericos como "error" en lugar de explicar que debe corregir el usuario.

Buenas practicas para interfaces

• Convierte los datos antes de decidir.
• Prefiere comparaciones estrictas con === y !==.
• Ordena las condiciones de lo mas especifico a lo mas general.
• Usa nombres claros: isValid, hasError, isPublished.
• Separa la logica de decision del renderizado cuando el ejemplo crezca.
• Acompana cada decision con un mensaje util para el usuario.

Reto practico

Variante extra: separa la logica en dos funciones. Una funcion debe validar los datos y devolver un objeto con message y className. Otra funcion debe encargarse de mostrar el resultado en pantalla.

Conclusion

Los condicionales son el primer paso para construir interfaces que responden. No hacen magia, pero permiten transformar datos en decisiones: mostrar un mensaje, aplicar una clase, bloquear una accion o guiar al usuario hacia el siguiente paso.

Cuando entiendes if, else, operadores logicos y comparaciones estrictas, empiezas a escribir codigo que no solo funciona en el caso ideal, sino tambien cuando el usuario se equivoca, deja campos vacios o ingresa datos inesperados.

En el siguiente capitulo daremos otro salto natural: eventos del DOM. Es decir, como hacer que la interfaz ejecute estas decisiones cuando el usuario escribe, hace clic, envia un formulario o cambia un valor.

Fuentes consultadas

• MDN Web Docs: if...else
• MDN Web Docs: Control flow and error handling
• MDN Web Docs: Truthy
• MDN Web Docs: Falsy
• MDN Web Docs: Conditional operator