JavaScript
Truthy y falsy
Explica qué valores son truthy o falsy y cómo funcionan las condiciones, la negación, el cortocircuito y las diferencias entre || y ??.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Explica qué valores son truthy o falsy y cómo funcionan las condiciones, la negación, el cortocircuito y las diferencias entre || y ??.
Cuando JavaScript necesita decidir si una condición se cumple, convierte el valor evaluado a boolean. Algunos valores se interpretan como false; todos los demás se interpretan como true.
if ("Nicolás") {
console.log("Este bloque se ejecuta");
}JavaScript tiene un grupo pequeño de valores que se convierten en false dentro de una condición:
false
0
-0
0n
""
null
undefined
NaNBoolean(false); // false
Boolean(0); // false
Boolean(""); // false
Boolean(null); // false
Boolean(undefined); // false
Boolean(NaN); // falseTodo valor que no esté en esa lista es truthy.
Los siguientes valores son truthy:
Boolean("false"); // true
Boolean("0"); // true
Boolean([]); // true
Boolean({}); // true
Boolean(-1); // true
Boolean(" "); // trueUn string con la palabra "false" sigue siendo un string no vacío. Un array vacío y un objeto vacío siguen siendo objetos existentes.
const username = "Nicolás";
if (username) {
console.log("Hay un nombre de usuario");
}Esto puede ser útil cuando cualquier valor falsy debe considerarse ausencia. Sin embargo, no siempre expresa correctamente la regla del negocio.
Considera un sistema donde 0 es un valor válido:
const stock = 0;
if (!stock) {
console.log("No existe información de stock");
}El mensaje es incorrecto. Sí existe información: el stock es cero.
Una comprobación precisa sería:
if (stock === null || stock === undefined) {
console.log("No existe información de stock");
} else if (stock === 0) {
console.log("Producto agotado");
}const user = {
isActive: false,
};
if (user.isActive) {
console.log("Usuario activo");
}Aquí la condición pregunta por el valor booleano, lo cual es correcto.
Pero esto sería ambiguo:
if (!user.isActive) {
// Puede significar false, null, undefined, 0, "" o NaN.
}Cuando el tipo esperado es boolean, una comparación explícita puede comunicar mejor la intención:
if (user.isActive === false) {
console.log("Usuario desactivado");
}El operador ! convierte un valor a boolean y luego lo invierte.
!"Hola"; // false
!0; // trueDos negaciones convierten un valor a su equivalente booleano:
!!"Hola"; // true
!!0; // falseEs equivalente a:
Boolean("Hola"); // true
Boolean(0); // falseBoolean(value) suele ser más claro cuando el objetivo es convertir.
&& no devuelve necesariamente un boolean. Evalúa de izquierda a derecha y devuelve:
"Nicolás" && "Garzón"; // "Garzón"
0 && "resultado"; // 0
true && 25; // 25Un uso común:
const user = { name: "Nicolás" };
user && user.name; // "Nicolás"En código moderno, el optional chaining suele expresar mejor el acceso seguro:
user?.name;|| devuelve:
"" || "Sin nombre"; // "Sin nombre"
0 || 10; // 10
undefined || "por defecto"; // "por defecto"Puede utilizarse para valores por defecto, pero reemplaza cualquier valor falsy, incluso cuando es válido.
const configuredLimit = 0;
const limit = configuredLimit || 20;
console.log(limit); // 20Si cero significa “sin resultados”, acabamos de perder una configuración válida.
El operador nullish coalescing solo utiliza el valor alternativo cuando el lado izquierdo es null o undefined.
const configuredLimit = 0;
configuredLimit || 20; // 20
configuredLimit ?? 20; // 0const name = "";
name || "Anónimo"; // "Anónimo"
name ?? "Anónimo"; // ""Usa ?? cuando 0, false o "" sean valores permitidos.
function hasText(value) {
return typeof value === "string" && value.trim().length > 0;
}Esta comprobación es más precisa que usar únicamente Boolean(value), porque un string con espacios es truthy.
const response = {
total: 0,
items: [],
};
if (response.total === 0) {
console.log("No hay resultados");
}
if (response.items.length === 0) {
console.log("La lista está vacía");
}Un array vacío es truthy; su contenido se comprueba mediante length.
if (user?.isAdmin === true) {
showAdminPanel();
}Aquí distinguimos claramente entre un administrador, un usuario normal y un usuario que todavía no existe.
"false" se interpreta como false.[] y {} son falsy por estar vacíos.|| cuando cero o false son valores válidos.0 como si significara ausencia.!value sin considerar todos los tipos que agrupa.&& y || devuelven valores, no solamente booleanos.|| reemplaza cualquier valor falsy.?? reemplaza únicamente null y undefined.Predice qué líneas se ejecutan:
if ([]) console.log("A");
if ({}) console.log("B");
if ("") console.log("C");
if ("false") console.log("D");
if (0) console.log("E");
if (-1) console.log("F");Se imprimen A, B, D y F.
false.Igualdad y comparaciones explica cómo JavaScript decide si dos valores son iguales y por qué algunas comparaciones realizan coerción.