Unidad 5 · Lecciones 029-031

Operadores de Comparacion

¿Tiene esta persona saldo suficiente? ¿Coinciden las dos contrasenas? ¿Es este usuario el mismo que aquel? Comparar valores es la base de cualquier decision que tome tu programa. Y en JavaScript hay un detalle que causa muchos errores: existen dos formas de comparar igualdad y no dan siempre el mismo resultado.

📚 3 lecciones originales ⏱ Lectura ~20 min ↩ Requiere: Unidades 3 y 4

🎯 Objetivo de aprendizaje

Al terminar sabras comparar dos valores con todos los operadores del lenguaje, explicar la diferencia entre == y ===, usar typeof para inspeccionar un dato, y evitar las trampas de null y undefined.

5.1 Mayor que y menor que

La sintaxis es la misma que aprendiste en la escuela. El resultado siempre es true o false.

Comparar magnitudes

const numero1 = 20;
const numero2 = '20';   // ojo: este es un STRING
const numero3 = 30;

// Mayor que
console.log(numero1 > numero3);   // false -> 20 no es mayor que 30
console.log(numero3 > numero1);   // true  -> 30 si es mayor que 20

// Menor que
console.log(numero1 < numero3);   // true  -> 20 si es menor que 30

💡 Para que sirve en la practica

Cuando alguien compra en una tienda online, el sistema comprueba si el saldo de la tarjeta es mayor o igual que el total del pedido. Si lo es, se completa la compra; si no, se muestra un error. Esa es exactamente la comparacion que acabas de ver.

Operador	Significado	Ejemplo	Resultado
`>`	Mayor que	`30 > 20`	`true`
`<`	Menor que	`30 < 20`	`false`
`>=`	Mayor o igual que	`20 >= 20`	`true`
`<=`	Menor o igual que	`20 <= 20`	`true`

5.2 Comparar igualdad: `==` frente a `===`

⚠ Primero, no confundas = con ==

= con un solo signo asigna un valor, como hiciste en la Unidad 2. Para comparar necesitas dos (==) o tres (===). Confundirlos es uno de los errores mas frecuentes cuando empiezas.

El comparador flexible: ==

const numero1 = 20;      // numero
const numero2 = '20';    // string
const numero3 = 30;

console.log(numero1 == numero3);   // false -> 20 y 30 no son iguales
console.log(numero1 == numero2);   // true  <-- 20 y '20' los da por iguales

Ese ultimo true es la clave de la unidad. == mira solo el valor: ve un 20 y un 20 y decide que son iguales, aunque uno sea numero y otro texto.

El comparador estricto: ===

const numero1 = 20;
const numero2 = '20';

console.log(numero1 == numero2);    // true
console.log(numero1 === numero2);   // false  <-- el estricto los distingue

Por que uno dice `true` y el otro `false`

typeof revela el motivo

const numero1 = 20;
const numero2 = '20';

console.log(typeof numero1);   // 'number'
console.log(typeof numero2);   // 'string'

== (no estricto): Compara solo el valor. Si los tipos no coinciden, intenta convertirlos antes de comparar.

=== (estricto): Compara el valor Y el tipo de dato. Si los tipos difieren, devuelve false sin mas.

typeof: Operador que devuelve el tipo de un valor: 'number', 'string', 'boolean', 'object', 'undefined', 'function'.

Como conseguir que si sean iguales

Si tu base de datos devuelve un precio como texto y quieres compararlo con un numero, conviertelo primero (lo aprendiste en la Unidad 4):

Convertir y despues comparar

const numero1 = 20;
const numero2 = '20';

console.log(numero1 === numero2);                       // false
console.log(numero1 === Number.parseInt(numero2));      // true

🎓 Pregunta de entrevista

¿Cual es la diferencia entre == y ===?
== compara solo el valor y aplica conversion de tipos; === compara valor y tipo sin conversion. La recomendacion profesional es usar siempre ===, salvo que tengas una razon concreta para lo contrario.

5.3 Comprobar que dos valores son distintos

A veces no te interesa si un valor es mayor o igual, sino simplemente si son diferentes. El caso tipico: verificar que la contrasena y su confirmacion coinciden.

Validar dos contrasenas

const password1 = 'admin';
const password2 = 'admin123';

console.log(password1 != password2);   // true -> efectivamente son distintas

Y, como en la igualdad, existe la version estricta:

!= frente a !==

const numero1 = 20;      // numero
const numero2 = '20';    // string

console.log(numero1 != numero2);    // false -> "para mi tienen el mismo valor"
console.log(numero1 !== numero2);   // true  -> "el tipo es distinto, asi que son distintos"

// Convirtiendo primero, ambos coinciden
console.log(numero1 !== Number.parseInt(numero2));   // false

Operador	Compara	`20` vs `'20'`
`==`	Solo el valor	`true`
`===`	Valor y tipo	`false`
`!=`	Solo el valor, negado	`false`
`!==`	Valor y tipo, negado	`true`

5.4 `null` y `undefined`

Ademas de string, number y boolean, JavaScript tiene otros dos tipos primitivos que se confunden mucho: undefined y null.

undefined: La variable existe pero no tiene valor. JavaScript lo pone solo, tu no lo escribes.

null: Una ausencia de valor asignada a proposito. La escribes tu para decir "aqui no hay nada".

La diferencia en codigo

// undefined: la creas pero no le das valor
let numero;
console.log(numero);           // undefined
console.log(typeof numero);    // 'undefined'

// null: se lo asignas tu
let numero2 = null;
console.log(numero2);          // null
console.log(typeof numero2);   // 'object'  <-- sorpresa

⚠ ¿Por que typeof null dice 'object'?

Es una peculiaridad historica: la especificacion de ECMAScript establece que los null se traten como objetos. No tiene una logica intuitiva, simplemente es asi y conviene conocerlo.

La trampa

Aqui es donde el comparador no estricto se vuelve peligroso. undefined y null son conceptualmente distintos, pero == los da por iguales:

La trampa de == con null y undefined

let numero;              // undefined
let numero2 = null;      // null

console.log(numero == numero2);    // true   <-- inesperado
console.log(numero === numero2);   // false  <-- correcto

✗ El problema real que esto causa

Ese true significa que una comparacion puede darte por valido un dato que no existe. En un programa real eso se traduce en codigo que se ejecuta cuando no deberia, o en comportamientos extranos imposibles de rastrear.

✓ La regla practica

Compara siempre con === y !==. Es mas estricto, evita conversiones inesperadas, y si algo falla te resultara mucho mas facil entender por que.

5.5 Ejercicios practicos

Ejercicio 1

¿Puede pagar?

Una persona tiene 500 en la tarjeta y su pedido cuesta 500 exactos. Comprueba con el operador adecuado que si puede pagar, y muestra tambien que pasaria si solo comprobaras "mayor que".

Ver solucion

Solucion

const saldo = 500;
const totalAPagar = 500;

console.log('Solo mayor que:', saldo > totalAPagar);        // false
console.log('Mayor o igual:', saldo >= totalAPagar);        // true

Con > rechazarias una compra perfectamente valida. En casos limite como este, >= es el operador correcto.

Ejercicio 2

Tabla de la verdad

Sin ejecutar nada, predice el resultado de estas seis comparaciones. Despues comprueba.

Predice antes de ejecutar

console.log(10 == '10');
console.log(10 === '10');
console.log(10 != '10');
console.log(10 !== '10');
console.log('abc' === 'abc');
console.log(0 == null);

Ver respuestas y explicacion

true — mismo valor, == ignora el tipo.
false — === ve numero contra string.
false — para != tienen el mismo valor, asi que no son distintos.
true — para !== si son distintos, porque el tipo difiere.
true — mismo valor y mismo tipo.
false — aunque null parezca "vacio", 0 no se convierte a null. Otro motivo para evitar ==.

Reto

Validacion robusta de un formulario

Un formulario te entrega el precio como texto y la cantidad como texto. Necesitas: convertir ambos, comprobar que la cantidad no es undefined ni null usando el comparador correcto, y calcular el total.

Ver solucion

Solucion

const precioFormulario = '199.99';
const cantidadFormulario = '3';

// 1. Convertir
const precio = Number.parseFloat(precioFormulario);
const cantidad = Number.parseInt(cantidadFormulario);

// 2. Comprobar que existen de verdad (comparador estricto)
console.log('Precio definido:', precio !== undefined && precio !== null);
console.log('Cantidad definida:', cantidad !== undefined && cantidad !== null);

// 3. Comprobar el tipo
console.log('Tipo de precio:', typeof precio);
console.log('Tipo de cantidad:', typeof cantidad);

// 4. Calcular
console.log('Total:', (precio * cantidad).toFixed(2));

El operador && (y) exige que se cumplan las dos condiciones. Lo estudiaras a fondo en la Unidad 10.

5.6 Resumen de lo aprendido

Un = asigna; dos o tres comparan. No los confundas.
Magnitud: >, <, >=, <=. Devuelven true o false.
== compara solo el valor y convierte tipos por su cuenta: 20 == '20' es true.
=== compara valor y tipo. 20 === '20' es false.
!= y !== son las versiones negadas de las anteriores.
typeof te dice de que tipo es un valor. Es tu herramienta para depurar comparaciones raras.
undefined lo pone JavaScript cuando una variable no tiene valor; null lo asignas tu a proposito.
typeof null devuelve 'object' por una decision historica de la especificacion.
Regla profesional: usa siempre === y !==.

5.7 Verificacion de cierre

Distingo = de == y de ===
Se explicar por que 20 == '20' es true
Uso typeof para averiguar el tipo de un dato
Se la diferencia entre null y undefined
Comparo siempre con el operador estricto

¿Que devuelve 20 === '20'?

true
false
undefined
Un error de tipos

¿Que devuelve typeof null?

'object'
'null'
'undefined'
'empty'

¿Cuando obtienes undefined?

Cuando asignas null a una variable
Cuando una comparacion estricta falla
Cuando declaras una variable sin darle valor
Cuando conviertes texto no numerico con parseInt

🏁 Unidad completada

Marcar la Unidad 5 como completada