¿Cuál es la diferencia entre == y === en Javascript?

• Respuesta concisa
• Operador de igualdad relajada (==)
• Operador de igualdad estricta (===)
• Comparando objetos con == y ===
• ¿Cuándo debería utilizar == vs ===?
• Referencias sobre igualdad en Javascript

A continuación te daré un respuesta breve y sin rodeos. Pero para utilizar estos operadores de manera efectiva te conviene conocerlos más a fondo, así que te recomiendo continuar leyendo hasta el final del artículo.

Respuesta concisa

Si los valores que se van a comparar no son del mismo tipo, el operador de igualdad relajada (==)

• primero convierte el tipo de uno de ellos para que los 2 valores tengan un tipo de dato común
• luego realiza la comparación

Por ejemplo, si los valores a comparar son el valor numérico 3 y el valor de texto (string) ‘3’:

// el string '3' es convertido al valor numérico 3
// luego se comparan dos valores numéricos: 3 y 3
// lo cual resulta en true

'3' == 3 // 👉 true

El operador de igualdad estricta (===), a diferencia del operador de igualdad relajada (==), no realiza conversión de tipos, sino que considera que dos valores de diferente tipo son valores diferentes. Nunca considerará a dos valores de tipo distinto como valores iguales.

// Operador de igualdad relajada
3 == '3' // 👉 true
3 == 3   // 👉 true

// Operador de igualdad estricta
3 === '3' // 👉 false
3 === 3   // 👉 true

Ambos operadores (== y ===) devuelven un valor booleano.

Operador de igualdad relajada (==)

Al operador de igualdad relajada también se le llama operador de igualdad débil, igualdad regular o igualdad abstracta. De aquí en adelante, utilizaremos el término “operador de igualdad relajada”.

3 == '3' // 👉 true
'3' == 3 // 👉 true
1 == true // 👉 true
0 == false // 👉 true

'false' == false // 👉 false
3 == true // 👉 false
0 == null // 👉 false
0 == undefined // 👉 false

null == undefined // 👉 true

Si uno de los operandos es booleano y el otro operando no lo es, convierte el booleano a un valor numérico. Por ejemplo, true es convertido al número 1, y false es convertido al número 0. Luego se vuelven a comparar los operandos.

1 == true // 👉 true, aquí true es convertido a 1
0 == false // 👉 true, aquí false es convertido a 0

Si se compara un valor numérico con un valor de texto (string), se intenta convertir el texto (string) a un número. Una falla en la conversión resulta en NaN y la comparación devolverá false.

NaN por sus siglas en inglés representa Not-A-Number.

// '123' es convertido a 123 
// devuelve true
'123' == 123 // 👉 true

// 'Leo' no puede ser convertido en número 
// intentar convertir 'Leo' a número resulta en NaN
// así que devuelve false
'Leo' == 123 // 👉 false

Si uno de los operandos es null o undefined, el otro también debe ser null o undefined para resultar en true, de lo contrario resulta en false.

0 == null // false
0 == undefined // false
false == null // false
false == undefined // false 
null == undefined // true

Operador de igualdad estricta (===)

El operador de igualdad estricta comprueba si sus dos operandos son iguales y devuelve un resultado booleano. Cuando los dos operandos son de distinto tipo de dato, siembre devuelve false.

// A continuación, resulta en false en todos los casos
// porque todas estas comparaciones son valores
// de tipo de dato diferente
3 === '3' // false
'3' === 3 // false
1 === true // false
3 === true // false
0 === false // false
0 === null // false
0 === undefined // false
null === undefined // false

// A continuación, resulta en true porque ambos, 
// tanto el valor como el tipo de dato son iguales
3 === 3 // true
'3' === '3' // true

Comparando objetos con == y ===

Al comparar objetos, el operador de igualdad relajada (==) devuelve true si los dos operandos hacen referencia al mismo objeto.

Al comparar objetos, el operador de igualdad estricta (===) se comporta de manera similar al operador de igualdad relajada.

// ==
const empresa1 = {
  nombre: 'ABC Company'
};

const empresa2 = {
  nombre: 'ABC Company'
};

empresa1 == empresa2 // 👉 false
empresa1 == empresa1 // 👉 true

// ===
const libro1 = {
  titulo: 'Codigo Limpio'
};

const libro2 = {
  titulo: 'Codigo Limpio'
};

libro1 === libro2 // 👉 false
libro1 === libro1 // 👉 true

empresa1 == empresa1 devuelven true porque los dos operandos apuntan al mismo objeto.

Por otro lado, empresa1 === empresa2 devuelve false porque los operandos empresa1 y empresa2 son instancias de objetos diferentes.

💡 Observa que los objetos empresa1 y empresa2 tienen el mismo contenido: ambos tienen la propiedad nombre con el valor ‘ABC Company’. Lo mismo puede decirse de los objetos libro1 y libro2: ambos tienen la propiedad titulo con el valor ‘Codigo Limpio’. Aún así, cuando se comparan objetos con la misma estructura, empresa1 == empresa2, devuelve false.

Igualdad referencial es útil cuando deseas comparar referencias a objetos, mas bien que su contenido.

¿Cuándo debería utilizar == vs ===?

La recomendación general es utilizar el operador de igualdad estricta (===) porque su resultado es más predecible, funciona como lo esperas.

Si compara valores de tipo diferente, el operador de igualdad relajada (==) primero efectúa una conversión en el tipo de uno de los operadores, y esto en ocasiones puede producir resultados no esperados.

La lista completa de reglas de igualdad relajada es un tanto complicada y difícil de memorizar.

Para muestra, un botón:

false == 'false' // 👉 false
false == '0' // 👉 true 🤯

A menos de que entiendas a cabalidad las conversiones que suceden con ==, en la gran mayoría de los casos es preferible usar ===.

Referencias sobre igualdad en Javascript

He aquí un par de referencias útiles sobre comparación de valores en Javascript.

• Tabla de comparación con ==, === y if()
• Tabla de igualdad unificada