JavaScript
Condicionales
Explica cómo tomar decisiones con if, else y else if, ordenar condiciones, evitar anidamiento y distinguir ausencia de valores falsy válidos.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Explica cómo tomar decisiones con if, else y else if, ordenar condiciones, evitar anidamiento y distinguir ausencia de valores falsy válidos.
Los condicionales permiten que un programa tome decisiones. Evalúan una condición y ejecutan un bloque únicamente cuando esa condición se interpreta como verdadera.
if (age >= 18) {
showAdultContent();
}if ejecuta un bloque cuando su condición es truthy.
const hasStock = true;
if (hasStock) {
enablePurchaseButton();
}La condición se escribe entre paréntesis y el bloque entre llaves.
if (condition) {
// Se ejecuta cuando condition es truthy.
}La condición no tiene que ser literalmente true o false. JavaScript la convierte a booleano.
const products = ["Keyboard"];
if (products.length) {
console.log("There are products");
}products.length vale 1, que es truthy.
Las reglas completas se explican en Truthy y falsy.
else define el camino alternativo cuando la condición del if no se cumple.
if (stock > 0) {
showAvailableProduct();
} else {
showOutOfStockMessage();
}Solo uno de los dos bloques se ejecuta.
else if permite revisar más condiciones cuando las anteriores fallaron.
if (score >= 90) {
result = "Excellent";
} else if (score >= 70) {
result = "Approved";
} else {
result = "Failed";
}JavaScript evalúa de arriba hacia abajo y se detiene en la primera condición que sea truthy.
const score = 95;Aunque score >= 70 también es verdadero, solo se ejecuta el primer bloque porque score >= 90 apareció antes.
Cuando varias condiciones pueden cumplirse al mismo tiempo, coloca primero la más específica o restrictiva.
// Incorrecto.
if (score >= 70) {
result = "Approved";
} else if (score >= 90) {
result = "Excellent";
}La segunda condición nunca se alcanza para una nota de 90 o más.
// Correcto.
if (score >= 90) {
result = "Excellent";
} else if (score >= 70) {
result = "Approved";
}Una condición puede combinar varias preguntas.
if (isAuthenticated && hasPermission) {
openAdminPanel();
}if (isOwner || isAdmin) {
showEditButton();
}if (!isBlocked) {
allowAccess();
}Cuando una condición se vuelve difícil de leer, conviene dividirla o nombrarla.
const canEditOrder =
isAuthenticated &&
order.status === "pending" &&
(isOwner || isAdmin);
if (canEditOrder) {
showEditForm();
}El nombre canEditOrder comunica la intención mejor que repetir la expresión completa.
Una condición debe representar claramente la pregunta que quieres responder.
if (status === "active") {
startService();
}Evita comparaciones innecesarias con booleanos:
if (isActive === true) {
startService();
}Normalmente basta con:
if (isActive) {
startService();
}Para el caso contrario:
if (!isActive) {
stopService();
}La comparación explícita sí es útil cuando necesitas distinguir valores que podrían confundirse por coerción o por contexto.
if (stock === 0) {
showOutOfStockMessage();
}Aquí interesa específicamente el número 0, no cualquier valor falsy.
JavaScript permite omitir las llaves cuando el bloque tiene una sola sentencia.
if (isReady) start();Aunque es válido, utilizar llaves suele ser más seguro y consistente.
if (isReady) {
start();
}Sin llaves, añadir una segunda línea puede producir un error visualmente engañoso.
if (isReady)
start();
trackStart(); // Se ejecuta siempre.Con llaves, el alcance del condicional queda claro.
Un condicional puede contener otro.
if (isAuthenticated) {
if (hasPermission) {
openAdminPanel();
}
}Funciona, pero demasiados niveles dificultan seguir el flujo.
En este caso puede combinarse la condición:
if (isAuthenticated && hasPermission) {
openAdminPanel();
}O utilizar retornos tempranos dentro de una función:
function openPanel(user) {
if (!user.isAuthenticated) {
return "Authentication required";
}
if (!user.hasPermission) {
return "Permission denied";
}
return showAdminPanel();
}Esta técnica se profundiza en Diseño de decisiones.
El operador ternario produce un valor.
const label = isActive ? "Active" : "Inactive";if controla la ejecución de sentencias.
if (isActive) {
startService();
} else {
stopService();
}Usa ternario para escoger entre dos valores simples. Usa if cuando cada camino necesita varias instrucciones, validaciones o efectos.
= asigna un valor. === compara.
let status = "pending";
if (status = "completed") {
console.log("Completed");
}La asignación cambia status a "completed" y además produce ese string, que es truthy. Por eso el bloque se ejecuta.
La comparación correcta es:
if (status === "completed") {
console.log("Completed");
}Un linter puede detectar muchos errores de este tipo.
Este patrón puede producir errores:
if (!quantity) {
quantity = 1;
}También reemplaza 0, aunque quizá 0 sea un valor válido.
Cuando solo quieres detectar ausencia:
if (quantity === null || quantity === undefined) {
quantity = 1;
}O utiliza ?? cuando necesitas un valor alternativo:
const finalQuantity = quantity ?? 1;Los arrays y objetos son truthy, incluso cuando están vacíos.
if ([]) {
console.log("This runs");
}
if ({}) {
console.log("This also runs");
}Para comprobar contenido:
if (products.length > 0) {
showProducts(products);
}if (Object.keys(settings).length > 0) {
applySettings(settings);
}function validatePurchase({ user, product, quantity, balance }) {
if (!user) {
return "User is required";
}
if (!product) {
return "Product is required";
}
if (!Number.isInteger(quantity) || quantity <= 0) {
return "Quantity must be a positive integer";
}
if (!product.isActive) {
return "Product is not available";
}
if (product.stock < quantity) {
return "Insufficient stock";
}
const total = product.price * quantity;
if (balance < total) {
return "Insufficient balance";
}
return null;
}Cada condicional responde una sola pregunta y detiene el proceso cuando encuentra un problema.
= con ===.if (!value) cuando 0 es válido.if.if ejecuta un bloque cuando la condición es truthy.else representa el camino alternativo.else if se evalúa en orden y se detiene en la primera coincidencia.¿Qué resultado produce cada valor de score?
function getResult(score) {
if (score >= 70) {
return "Approved";
} else if (score >= 90) {
return "Excellent";
}
return "Failed";
}Prueba mentalmente con 95, 75 y 60.
95 devuelve "Approved".75 devuelve "Approved".60 devuelve "Failed".El caso "Excellent" nunca se alcanza porque toda nota mayor o igual a 90 también cumple primero score >= 70. La condición más específica debe ir antes.
switch muestra otra forma de seleccionar un camino cuando una misma expresión puede coincidir con varios valores exactos.