Lección 6 · 6 de 20

Comparaciones, lógica y truthy · JavaScript

La diferencia entre === y == en JavaScript, los operadores lógicos &&, || y !, y qué valores cuentan como verdaderos o falsos (truthy y falsy).

JavaScript · Comparaciones, lógica y truthy en DMarlon Studio: el código del ejemplo y su salida en la terminal

`===` (igualdad estricta) compara el valor y el tipo: 5 === "5" es false porque uno es número y el otro texto. `==` convierte los tipos antes de comparar, y por eso 5 == "5" y hasta 0 == false dan true. Use siempre === y su contrario !==, que no dan sorpresas.

Los operadores lógicos combinan condiciones: && (y) exige que se cumplan las dos, || (o) basta con una y ! (no) da la vuelta al resultado. Con 16 años no se puede ir al concierto sin un adulto, pero age >= 18 || withAdult es verdadero porque withAdult lo es.

En un if, cualquier valor cuenta como verdadero o falso. Son falsy false, 0, "" (cadena vacía), null, undefined y NaN; todo lo demás es truthy, incluso "0". Por eso if (username) sirve para saber si el usuario ha escrito algo.

|| devuelve el primer valor truthy que encuentra, así que username || "Guest" da un valor por defecto cuando el nombre está vacío. Boolean() muestra cómo se interpreta un valor.

Código · main.js

// === compares value AND type; == converts types first (avoid it).console.log('5 === 5:    ', 5 === 5);console.log('5 === "5":  ', 5 === "5");console.log('5 == "5":   ', 5 == "5");console.log("0 == false: ", 0 == false, "| 0 === false:", 0 === false);console.log('"apple" !== "Apple":', "apple" !== "Apple");// Logical operators: && (and), || (or), ! (not)const age = 16;const withAdult = true;console.log("Can enter the concert:", age >= 18 || withAdult);const isMember = true;const total = 80;console.log("Gets the discount:", isMember && total >= 50);console.log("Is not a member:", !isMember);// Truthy and falsy: in an if, every value counts as true or false.// Falsy: false, 0, "", null, undefined and NaN. Everything else is truthy.const username = "";if (username) {  console.log(`Welcome, ${username}`);} else {  console.log("Please type your name");}// || gives the first truthy value: handy for defaults.console.log("Name shown:", username || "Guest");console.log("Boolean(0):", Boolean(0), "| Boolean('0'):", Boolean("0"));

Salida · node main.js

5 === 5:     true
5 === "5":   false
5 == "5":    true
0 == false:  true | 0 === false: false
"apple" !== "Apple": true
Can enter the concert: true
Gets the discount: true
Is not a member: false
Please type your name
Name shown: Guest
Boolean(0): false | Boolean('0'): true

Para recordar

Use === y !==; evite ==.
&& exige las dos condiciones; ||, una; ! niega.
Falsy: false, 0, "", null, undefined, NaN.
valor || porDefecto da un valor de reserva.

Ejercicio

Añada un descuento para quien sea socio o gaste más de 100 euros, pero nunca los domingos (una variable isSunday), y pruebe varias combinaciones.