Igualdad débil vs estricta en JavaScript

Clase 10 de 39 • Curso de Fundamentos de JavaScript

Resumen

Aprende a controlar resultados y evitar errores comunes al comparar valores en JavaScript. Aquí verás cómo la coerción de tipos afecta la igualdad débil (==) y por qué la igualdad estricta (===) y la desigualdad estricta (!==) son la práctica recomendada para comparaciones seguras.

¿Qué son y por qué importan los operadores de comparación en JavaScript?

Comparar valores parece simple, pero en JavaScript interviene la coerción. Con la igualdad débil el motor intenta convertir tipos antes de comparar, lo que produce resultados inesperados. La igualdad estricta compara valor y tipo, evitando conversiones implícitas.

¿Cómo funciona la igualdad débil == con coerción de tipos?

Con == se comparan valores permitiendo conversión de tipos. Esto puede dar verdaderos que sorprenden.

console.log(5 == '5');      // true
console.log(true == 1);     // true
console.log(false == 0);    // true
console.log(null == undefined); // true

Claves:

La coerción intenta alinear tipos antes de comparar.
Valores distintos como número 5 y string '5' pueden considerarse iguales.
En contexto booleano, combinaciones como null y undefined terminan siendo equivalentes.
Estos casos dificultan el control de errores y la lectura del código.

¿Qué hace la desigualdad débil != en los mismos casos?

También aplica coerción y puede confundir.

console.log(5 != '5'); // false

Puntos a notar:

Se convierte 5 a string y se compara con '5'.
Como los ve iguales tras convertir, la desigualdad resulta falsa.

¿Qué resuelve la igualdad estricta === y la desigualdad estricta !==?

La comparación estricta evita conversiones implícitas: verifica valor y tipo. Así, se eliminan ambigüedades y el resultado es predecible. Es la forma recomendada para comparar en JavaScript cuando necesitas precisión.

¿Cómo comparar valor y tipo sin sorpresas?

Con === solo es true si coinciden valor y tipo.

console.log(5 === 5);    // true
console.log(5 === '5');  // false

Ventajas prácticas:

No hay coerción de tipos.
El código es más claro y fácil de depurar.
Los errores por conversiones implícitas se reducen.

¿Cómo negar con !== para validar diferencias reales?

Con !== se verifica que o el valor o el tipo (o ambos) sean distintos.

console.log(5 !== '5'); // true
console.log(5 !== 5);   // false

Buenas prácticas:

Usa === y !== por defecto.
Evita == y != para prevenir resultados inesperados.

¿Qué habilidades y conceptos practicar para evitar errores?

Para dominar estas comparaciones, fortalece estas capacidades en tu flujo de trabajo:

Entender la coerción de tipos y sus efectos en == y !=.
Distinguir entre número, string, y valores especiales como null y undefined.
Usar console.log para verificar resultados rápidamente.
Escribir comentarios claros que expliquen la elección del operador.
Preferir igualdad estricta para comparar con seguridad.
Probar casos límite: números vs. strings, booleanos vs. números, null y undefined.

¿Ya probaste estos ejemplos en tu editor? Comparte tu resultado y el reto que te planteaste en los comentarios.

Comentarios

Marco Antonio Evangelista Armenta

student••

Existe un caso especial donde un valor no es igual a sí mismo. NaN representa un resultado numérico inválido y por definición del lenguaje, nunca es igual a ningún valor, ni siquiera a otro NaN.

Ejemplo:

algo === algo
Resultado: true (normalmente)

Pero con NaN:

NaN === NaN 
Resultado: false

Lidia Andrade Martínez

student•

// ============================================
// Reto: Igualdad débil vs estricta en JavaScript
// ============================================
// Practica == (igualdad débil con coerción), != (desigualdad débil),
// === (igualdad estricta: valor y tipo) y !== (desigualdad estricta).
// Ejecuta los tests con: npx vitest src/07-igualdad-debil-estricta
// ============================================

// --- Reto 1: Igualdad débil (==) ---
// Recibe dos valores "a" y "b". Retorna el resultado de comparar con ==.
// La coerción puede hacer que 5 == '5' sea true.
function resultadoIgualdadDebil(a, b) {
  // Tu código aquí
  return a == b;
}

// --- Reto 2: Desigualdad débil (!=) ---
// Recibe dos valores "a" y "b". Retorna el resultado de comparar con !=.
// Con coerción, 5 != '5' resulta false porque se consideran iguales.
function resultadoDesigualdadDebil(a, b) {
  // Tu código aquí
  return a != b;
}

// --- Reto 3: Igualdad estricta (===) ---
// Recibe dos valores "a" y "b". Retorna el resultado de comparar con ===.
// Solo es true si coinciden valor y tipo; no hay conversión implícita.
function resultadoIgualdadEstricta(a, b) {
  // Tu código aquí
  return a === b;
}

// --- Reto 4: Desigualdad estricta (!==) ---
// Recibe dos valores "a" y "b". Retorna el resultado de comparar con !==.
// Es true si el valor o el tipo (o ambos) son distintos.
function resultadoDesigualdadEstricta(a, b) {
  // Tu código aquí
  return a !== b;
}

// --- Reto 5: ¿Son iguales con coerción? ---
// Recibe dos valores "a" y "b". Retorna true si son iguales usando ==
// (permite que número y string "equivalentes" sean iguales).
function sonIgualesConCoercion(a, b) {
  // Tu código aquí
  return a == b;
}

// --- Reto 6: ¿Son iguales en valor y tipo? ---
// Recibe dos valores "a" y "b". Retorna true solo si son estrictamente
// iguales (===): mismo valor y mismo tipo, sin coerción.
function sonIgualesValorYTipo(a, b) {
  // Tu código aquí
  return a === b;
}

// --- Reto 7: null y undefined con igualdad débil ---
// No recibe parámetros. Retorna el resultado de comparar null == undefined.
// En JavaScript, con == estos dos valores especiales se consideran iguales.
function nullYUndefinedSonIgualesDebil() {
  // Tu código aquí
  return null == undefined;
}

module.exports = {
  resultadoIgualdadDebil,
  resultadoDesigualdadDebil,
  resultadoIgualdadEstricta,
  resultadoDesigualdadEstricta,
  sonIgualesConCoercion,
  sonIgualesValorYTipo,
  nullYUndefinedSonIgualesDebil,
};

// ============================================
// Reto: Igualdad débil vs estricta en JavaScript
// ============================================
// Practica == (igualdad débil con coerción), != (desigualdad débil),
// === (igualdad estricta: valor y tipo) y !== (desigualdad estricta).
// Ejecuta los tests con: npx vitest src/07-igualdad-debil-estricta
// ============================================

// --- Reto 1: Igualdad débil (==) ---
// Recibe dos valores "a" y "b". Retorna el resultado de comparar con ==.
// La coerción puede hacer que 5 == '5' sea true.
function resultadoIgualdadDebil(a, b) {
  // Tu código aquí
  return a == b;
}

// --- Reto 2: Desigualdad débil (!=) ---
// Recibe dos valores "a" y "b". Retorna el resultado de comparar con !=.
// Con coerción, 5 != '5' resulta false porque se consideran iguales.
function resultadoDesigualdadDebil(a, b) {
  // Tu código aquí
  return a != b;
}

// --- Reto 3: Igualdad estricta (===) ---
// Recibe dos valores "a" y "b". Retorna el resultado de comparar con ===.
// Solo es true si coinciden valor y tipo; no hay conversión implícita.
function resultadoIgualdadEstricta(a, b) {
  // Tu código aquí
  return a === b;
}

// --- Reto 4: Desigualdad estricta (!==) ---
// Recibe dos valores "a" y "b". Retorna el resultado de comparar con !==.
// Es true si el valor o el tipo (o ambos) son distintos.
function resultadoDesigualdadEstricta(a, b) {
  // Tu código aquí
  return a !== b;
}

// --- Reto 5: ¿Son iguales con coerción? ---
// Recibe dos valores "a" y "b". Retorna true si son iguales usando ==
// (permite que número y string "equivalentes" sean iguales).
function sonIgualesConCoercion(a, b) {
  // Tu código aquí
  return a == b;
}

// --- Reto 6: ¿Son iguales en valor y tipo? ---
// Recibe dos valores "a" y "b". Retorna true solo si son estrictamente
// iguales (===): mismo valor y mismo tipo, sin coerción.
function sonIgualesValorYTipo(a, b) {
  // Tu código aquí
  return a === b;
}

// --- Reto 7: null y undefined con igualdad débil ---
// No recibe parámetros. Retorna el resultado de comparar null == undefined.
// En JavaScript, con == estos dos valores especiales se consideran iguales.
function nullYUndefinedSonIgualesDebil() {
  // Tu código aquí
  return null == undefined;
}

module.exports = {
  resultadoIgualdadDebil,
  resultadoDesigualdadDebil,
  resultadoIgualdadEstricta,
  resultadoDesigualdadEstricta,
  sonIgualesConCoercion,
  sonIgualesValorYTipo,
  nullYUndefinedSonIgualesDebil,
};

Igualdad débil vs estricta en JavaScript

Fundamentos Javascript

Primeras líneas de JavaScript en la consola del navegador

Construye un editor de notas Markdown con JavaScript

Configuración del entorno para JavaScript

Var, let y const: qué cambia en JavaScript

Tipos de datos en JavaScript: primitivos vs complejos

Operadores aritméticos en JavaScript

Template literals en JavaScript: sintaxis y uso práctico

Métodos esenciales de strings en JavaScript

Coerción de tipos en JavaScript explicada

Igualdad débil vs estricta en JavaScript

Operadores lógicos AND, OR y NOT en JavaScript

If, else y else if en JavaScript

Switch en JavaScript: cuándo y cómo usarlo

Bucles for, while y for...of en JavaScript

while en JavaScript: evita bucles infinitos

Funciones, Scope y Estructuras de Datos

Anatomía de funciones en JavaScript

Scope en JavaScript: global, función y bloque

Closures en JavaScript: estado privado en cuentas

Qué es un array y cómo funciona en JavaScript

Objetos en JavaScript: claves, acceso y optional chaining

Destructuración de objetos en JavaScript

Map y filter: manipula arreglos de objetos

find, filter y reduce: cuándo usar cada uno

Primeras funciones del sistema de notas

Avanzar en nuestro proyecto leyendo código ajeno

DOM y Experiencia en el Navegador

Seleccionar elementos del DOM con JavaScript

Renderizado dinámico de opiniones con JavaScript

Eventos del DOM: click, hover y keydown en JavaScript

Formularios en JavaScript: preventDefault y localStorage

LocalStorage con JSON.stringify y JSON.parse

Manipulación del DOM en sistema de notas

Modulos y Asincronía

ES Modules: cómo dividir código en JavaScript

Asincronía en JavaScript: callbacks y promesas

Async/await vs promesas en JavaScript

Fetch en JavaScript: peticiones HTTP reales

Landing de productos con Fake API en JavaScript

Revisar código generado por IA en pull requests

Eliminar notas con confirmación en JavaScript

Cierre de fundamentos de JavaScript