Saltar al contenido
Curso de JavaScriptModerno · Interactivo

Unidad 6 · Lecciones 032-034

Booleans en JavaScript

El tipo de dato mas simple del lenguaje: solo puede valer true o false. Y sin embargo es el que decide si una persona puede ver una pelicula, dar me gusta a una foto o completar una compra. Toda la logica de tu programa acaba reduciendose a un boolean.

📚 3 lecciones originales ⏱ Lectura ~15 min ↩ Requiere: Unidad 5

🎯 Objetivo de aprendizaje

Al terminar sabras crear y comparar booleans, reconocer por que un 'true' entre comillas no es lo mismo que true, y escribir condiciones limpias sin comparaciones redundantes.

6.1 Que es un boolean

Un boolean solo admite dos valores posibles: true (verdadero) o false (falso). Sirve para representar cualquier cosa que en la vida real tenga solo dos estados:

La luz
Encendida o apagada
La conexion
Conectado a internet o no
La pregunta de examen
Bien o mal
El producto
Disponible o agotado
La sesion
Autenticado o no autenticado
El pago
Puede pagar el articulo o no

Y hay una fuente constante de booleans que ya conoces: toda comparacion de la Unidad 5 devuelve un boolean. 20 > 10 no es un numero, es un true.

6.2 Crear booleans

La forma normal
const boolean1 = true;
const boolean2 = false;

console.log(boolean1);
console.log(boolean2);

console.log(typeof boolean1);   // 'boolean'
console.log(typeof boolean2);   // 'boolean'

⚠ Se escriben en minusculas y sin comillas

true y false son palabras reservadas del lenguaje. Ni True, ni TRUE, ni 'true'.

La forma con constructor

new Boolean()
const boolean4 = new Boolean(true);

console.log(boolean4);          // parece true
console.log(typeof boolean4);   // pero es 'object'

💡 Patron repetido

Ya lo viste con new String() y new Number(): los constructores crean objetos, no valores primitivos. Es el mismo comportamiento en los tres casos. Para el trabajo del dia a dia, usa siempre la forma directa.

6.3 Comparar booleans

Comparaciones basicas
const boolean1 = true;
const boolean2 = false;

console.log(boolean1 == boolean2);    // false -> valores distintos
console.log(boolean1 == true);        // true
console.log(boolean1 === true);       // true  -> mismo valor y mismo tipo

El caso curioso: true frente a 'true'

En la Unidad 5 viste que 20 == '20' devuelve true: el comparador flexible convierte el texto en numero. Con los booleans eso no ocurre.

El string 'true' no es el boolean true
const boolean1 = true;
const boolean3 = 'true';    // esto es un STRING

console.log(boolean1 == boolean3);    // false  <-- ni con el flexible
console.log(boolean1 === boolean3);   // false

console.log(typeof boolean1);   // 'boolean'
console.log(typeof boolean3);   // 'string'

💡 Conclusion que conviene memorizar

Con numeros y strings, == convierte y da true. Con booleans y strings, ni siquiera el comparador flexible los da por iguales. Un 'true' que llegue de un formulario o de una API es texto, no un boolean, y tendras que tratarlo como tal.

6.4 Buenas practicas al evaluar un boolean

+ Nota sobre el orden del curso

Esta seccion usa if y else, que se estudian a fondo en la Unidad 10. Aqui solo necesitas saber lo evidente: si se cumple la condicion, se ejecuta el primer bloque; si no, el segundo. El curso original los introduce aqui por el mismo motivo.

El error mas comun

Muchisima gente escribe condiciones asi:

✗ Redundante
const autenticado = true;

if (autenticado === true) {
    console.log('Si puedes ver Netflix');
} else {
    console.log('No, no puedes verlo');
}
✓ Limpio
const autenticado = true;

if (autenticado) {
    console.log('Si puedes ver Netflix');
} else {
    console.log('No, no puedes verlo');
}

¿Por que sobra el === true? Porque el if ya evalua si la condicion es verdadera. Escribir autenticado === true es como preguntar «¿es verdad que es verdad?».

🎓 Esto se mira en las entrevistas

El material del curso es explicito: hay personas que no son contratadas por escribir codigo asi. No porque falle (funciona perfectamente), sino porque delata que no se ha entendido que un if ya trabaja con booleans.

Si el valor pasa a false, el codigo limpio entra automaticamente en el else, sin que tengas que cambiar nada:

Cambia el valor, no la condicion
const autenticado = false;

if (autenticado) {
    console.log('Si puedes ver Netflix');
} else {
    console.log('No, no puedes verlo');
}

6.5 Primer contacto con el operador ternario

Cuando lo unico que quieres es elegir entre dos valores, existe una forma mas compacta que un if completo: el operador ternario. Se llama asi porque tiene tres partes.

Anatomia
condicion ? valorSiEsVerdadero : valorSiEsFalso
//   |     |         |          |        |
//   |     |         |          |        +-- la parte "else"
//   |     |         |          +----------- separador
//   |     |         +---------------------- la parte "if"
//   |     +-------------------------------- empieza aqui
//   +-------------------------------------- lo que se evalua
El mismo ejemplo, en una linea
const autenticado = true;

console.log(autenticado ? 'Si esta autenticado' : 'No esta autenticado');
Cambiando el valor
const autenticado = false;

console.log(autenticado ? 'Si esta autenticado' : 'No esta autenticado');

💡 Cuando usarlo

El ternario brilla cuando solo eliges entre dos valores cortos. Si necesitas ejecutar varias instrucciones en cada rama, usa un if: sera mas legible. Veras el ternario completo, con condiciones multiples y anidadas, en la Unidad 10.

6.6 Ejercicios practicos

Ejercicio 1

Estado de un producto

Crea dos booleans (disponible y enOferta) y muestra su valor y su tipo. Despues comprueba con el comparador estricto si ambos son verdaderos a la vez usando una comparacion simple para cada uno.

Ver solucion
Solucion
const disponible = true;
const enOferta = false;

console.log('disponible:', disponible, '| tipo:', typeof disponible);
console.log('enOferta:', enOferta, '| tipo:', typeof enOferta);

console.log('Ambos iguales?', disponible === enOferta);
console.log('Disponible es cierto?', disponible === true);
Ejercicio 2

Limpia esta condicion

Este codigo funciona pero contiene dos malas practicas. Encuentralas y reescribelo.

Punto de partida
const pagado = true;

if (pagado === true) {
    console.log('Acceso concedido');
} else {
    if (pagado === false) {
        console.log('Debes pagar primero');
    }
}
Ver solucion

Las dos malas practicas:

  1. === true es redundante: el if ya evalua booleans.
  2. El if anidado dentro del else tambien sobra: si un boolean no es true, necesariamente es false.
Version limpia
const pagado = true;

if (pagado) {
    console.log('Acceso concedido');
} else {
    console.log('Debes pagar primero');
}
O todavia mas corto, con ternario
const pagado = true;

console.log(pagado ? 'Acceso concedido' : 'Debes pagar primero');
Reto

El dato que llega de un formulario

Un formulario HTML te envia el valor 'false' como texto en una variable llamada aceptaTerminos. Demuestra por que un if directo sobre ese valor te dara un resultado equivocado, y corrigelo.

Ver solucion
El problema
const aceptaTerminos = 'false';   // TEXTO, no boolean

console.log('Tipo:', typeof aceptaTerminos);

if (aceptaTerminos) {
    console.log('Ha aceptado los terminos');   // <-- entra aqui. MAL
} else {
    console.log('No ha aceptado los terminos');
}

Por que falla: para un if, cualquier texto que no este vacio se considera verdadero. La cadena 'false' tiene cinco caracteres, asi que cuenta como true.

La correccion
const aceptaTerminos = 'false';

// Convertir el texto en un boolean real comparandolo explicitamente
const acepta = aceptaTerminos === 'true';

console.log('Tipo tras convertir:', typeof acepta, '| valor:', acepta);

if (acepta) {
    console.log('Ha aceptado los terminos');
} else {
    console.log('No ha aceptado los terminos');   // <-- ahora si
}

💡 Aqui si tiene sentido comparar

Fijate en el matiz: comparar === 'true' contra un string es correcto y necesario. Lo que sobra es comparar === true contra un boolean que ya lo es.

6.7 Resumen de lo aprendido

  • Un boolean solo vale true o false, en minusculas y sin comillas.
  • Toda comparacion devuelve un boolean. Es la conexion directa con la Unidad 5.
  • new Boolean() crea un objeto, no un boolean primitivo. Igual que con strings y numeros.
  • 'true' no es true. Ni siquiera == los da por iguales.
  • No escribas if (variable === true). Escribe if (variable): el if ya evalua booleans.
  • El operador ternario condicion ? a : b resuelve en una linea lo que un if/else simple.
  • Cuidado con los datos externos: lo que llega de un formulario o de una API suele ser texto, aunque parezca un boolean.

6.8 Verificacion de cierre

¿Que devuelve true == 'true'?

  • true, porque == convierte los tipos
  • true, porque el texto dice "true"
  • Un error de tipos
  • false

¿Por que no se recomienda escribir if (autenticado === true)?

  • Porque produce un error en navegadores antiguos
  • Porque el if ya evalua booleans: la comparacion es redundante
  • Porque === no funciona con booleans
  • Porque es mas lento de ejecutar

🏁 Unidad completada