Operadores de comparación

Comparar es preguntarle a JavaScript: “¿estos dos valores se parecen?” o “¿cuál es mayor?”. La respuesta siempre es un booleano: true (verdadero) o false (falso). Esa respuesta es la que luego usan las estructuras if y los bucles while para decidir qué hacer.

Objetivos

Al terminar esta lección deberías ser capaz de:

• Usar los operadores >, <, >= y <=.
• Explicar la diferencia entre == y ===.
• Saber por qué se recomienda usar siempre === y !==.
• Evitar las comparaciones engañosas con textos y NaN.
• Combinar comparaciones con &&, || y !.

Toda comparación devuelve un booleano

comparaciones-basicas.js

console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 === 10); // true
console.log("hola" === "adiós"); // false

El resultado es siempre un valor de tipo boolean. Más adelante lo usarás dentro de las decisiones y los bucles.

Operadores de relación (mayor y menor)

Operador	Significado	Ejemplo	Resultado
>	Mayor que	7 > 3	true
<	Menor que	7 < 3	false
>=	Mayor o igual	7 >= 7	true
<=	Menor o igual	7 <= 3	false

relaciones.js

console.log(22 > 30); // false → no hace calor
console.log(22 >= 20); // true → está templado

Truco para recordarlo

El símbolo apunta siempre al valor menor: 3 < 5 se lee “3 es menor que 5”. El lado estrecho de la “boca” mira al número pequeño.

Igualdad: la diferencia clave entre == y ===

Aquí está el punto más importante de la lección. JavaScript tiene dos formas de comparar igualdad:

Operador	Nombre	Convierte tipos antes de comparar	Ejemplo	Resultado
==	Igualdad débil / flexible	Sí	5 == "5"	true
===	Igualdad estricta	No	5 === "5"	false
!=	Desigualdad débil	Sí	5 != "5"	false
!==	Desigualdad estricta	No	5 !== "5"	true

igualdad.js

console.log(5 == "5"); // true  → convierte "5" a número y compara
console.log(5 === "5"); // false → son de distinto tipo, no hay conversión

console.log(0 == false); // true  → conversión inesperada
console.log(0 === false); // false → un número no es un booleano

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

== intenta “arreglar” los tipos por su cuenta. Eso puede parecer cómodo, pero produce resultados difíciles de predecir. === es claro: mismo valor y mismo tipo.

Regla práctica

Escribe siempre === y !==. Reserva == solo para el caso concreto de comparar con null o undefined, y aun así es más claro hacer dos comparaciones explícitas. Lo verás en null y undefined.

Comparar textos

Los textos se comparan por orden alfabético (en realidad, por el orden de sus caracteres Unicode), no por tamaño ni por valor numérico:

comparar-textos.js

console.log("a" < "b"); // true
console.log("casa" > "coche"); // false → "casa" va antes
console.log("Ana" === "ana"); // false → mayúsculas y minúsculas importan

Esto genera un error clásico: comparar números que en realidad son texto.

cuidado-con-textos.js

console.log("10" < "2"); // true → compara carácter a carácter: "1" va antes que "2"
console.log(10 < 2); // false → ahora sí son números

Precaución

Si un valor viene de un formulario, suele llegar como texto. Conviértelo con Number("10") antes de compararlo con números, o usarás el orden alfabético sin querer.

Casos especiales

null y undefined

nulos.js

console.log(null == undefined); // true  → excepción del estándar
console.log(null === undefined); // false → siguen siendo tipos distintos

NaN no es igual a nada

nan.js

console.log(NaN === NaN); // false, ¡ni a sí mismo!
console.log(Number.isNaN(NaN)); // true → forma correcta de detectarlo

Combinar comparaciones con operadores lógicos

Cuando necesitas varias condiciones a la vez, se usan los operadores lógicos:

Operador	Significado	Ejemplo	Resultado
&&	Y (ambas deben cumplirse)	20 >= 18 && 20 < 65	true
||	O (basta una)	20 < 18 || 20 >= 65	false
!	NO (invierte)	!(20 >= 18)	false

combinadas.js

console.log(20 >= 18 && true); // true
console.log(10 > 5 && 3 < 1); // false
console.log(10 > 5 || 3 < 1); // true
console.log(!false); // true

Consejo

Usa paréntesis cuando combines varias condiciones: (10 > 5 && 3 < 4) || 1 === 2 es mucho más fácil de leer que la misma expresión sin paréntesis.

Errores frecuentes

• Usar = en vez de ===: el primero guarda un valor, el segundo compara. Es un bug silencioso.
• Confiar en ==: convierte tipos y da resultados inesperados.
• Comparar textos como números: "10" < "2" es true.
• Comparar decimales con ===: 0.1 + 0.2 === 0.3 es false por el redondeo; compara con una tolerancia pequeña.
• Comparar NaN con ===: usa Number.isNaN().

Ejercicio

Abre la consola y predice el resultado antes de ejecutar cada línea. Después comprueba:

7 >= 7;
"7" === 7;
"7" !== 7;
"manzana" < "pera";
"10" > "2";
null == undefined;
NaN === NaN;
15 > 10 && 3 < 1;

Para cada una, escribe una frase explicando por qué da ese resultado.

Resumen

• Toda comparación produce true o false.
• >, <, >= y <= comparan orden; === y !== comparan valor y tipo.
• == convierte tipos automáticamente y provoca sorpresas: usa siempre ===.
• Los textos se comparan alfabéticamente, así que convierte con Number() si vienen de un formulario.
• NaN nunca es igual a nada; usa Number.isNaN().
• &&, || y ! permiten combinar varias condiciones.

Siguiente paso: null y undefined.