JavaScript: == vs === Operador

Introducción

Los operadores de comparación se utilizan en declaraciones lógicas para determinar si dos variables u objetos son iguales según algunos criterios ya establecidos o definidos de forma personalizada. Si se deduce que las dos variables u objetos son iguales, el operador devuelve truey false si no lo son.

Los operadores de comparación en JavaScript son:

• < – menos que
• > – mas grande que
• <= – menor o igual que
• >= – mayor o igual que
• == y === – igual a (operador de igualdad estricto y flexible)
• != y !== – no es igual a (operador de desigualdad estricto y flexible)

JavaScript es interesante porque tiene dos operadores de comparación visualmente muy similares, pero en la práctica muy diferentes para la igualdad: == y ===.

En este artículo, explicaremos las diferencias entre operadores de igualdad estrictos y laxos y repasaremos algunos ejemplos de su uso.

Operador de igualdad suelto en JavaScript (==)

Los dobles iguales en JavaScript están probando la igualdad flexible. Esto permite que el motor de JavaScript intente convertir estas expresiones en un tipo común. Lo que significa que las expresiones no tienen por qué ser necesariamente del mismo tipo.

El proceso de convertir un valor de un tipo a otro se llama coerción de tipo. La coerción de tipo puede ser explícita e implícita.

La coerción de tipo explícita es, como su nombre lo indica, realizada explícitamente en código por un programador, utilizando los métodos integrados que proporciona JavaScript (Number(), String(), Boolean()…).

Por ejemplo:

// This would result in x being a number 42
let x = Number("42");

// Similarly,this would result in y being cast to the boolean value false 
let y = Boolean(0);

La coerción de tipo implícita, por otro lado, se realiza implícitamente mediante JavaScript. Este tipo de coerción generalmente se realiza cuando usamos operadores en diferentes tipos, pero uno de ellos puede «hacer coincidir» razonablemente, por ejemplo:

// x is going to be cast to the string "1".
let x = 1 + ""; 

Para explicar este ejemplo, veámoslo desde la perspectiva de un motor JavaScript:

La expresión debe evaluarse y asignarse a x. El primer numero es 1 y tiene + operador además de él. Esto implica la suma de enteros con el siguiente número. Sin embargo, hay una cadena vacía "", allí. Esto no se puede convertir en un número. Sin embargo, también podemos concatenar cadenas con +, así que hagamos coincidirlos como cadenas y realicemos la concatenación. Finalmente, el resultado se devuelve y se asigna a x.

En resumen, el motor de JavaScript intenta convertir ambos valores a un tipo que admita
la + operador, que en este caso es una cadena.

/* In this case, the JS engine deduces that both the operands and the result have to be cast to an integer because it's the only type that has a defined subtraction operation (-) */

let y = "5" - "2";

// Because booleans don't have a + operation, the JS engine converts both true values into 1's

let z = true + true;

Ahora bien, es exactamente este tipo de coerción lo que == el operador usa para verificar la igualdad. Repasemos algunos ejemplos de uso de operador de igualdad flexible, en el REPL de node:

> 42 == "42"
true
> "42" == '42'
true

42, "42" y '42' todos coinciden en el mismo tipo de datos, y todos son vagamente iguales, devolviendo true en las comparaciones.

Los booleanos siguen el mismo principio:

> true == 1
true
> true + true == 2
true
> false == 0
true
> false + true == 1
true

true es 1 y false es 0. Podemos convertirlos implícitamente en números enteros agregándolos.

Finalmente, aquí hay un ejemplo de una comparación (ilegible) pero sintácticamente válida:

> ("42" == '42') + (42 == "42") == 2
true

"42" == '42' se evalúa como true, tanto como 42 == "42". Por tanto, este lado de la expresión también se evaluó para true + true, que se convierte implícitamente en 1+1. Eso es obviamente == a 2, entonces la expresión devuelve true.

Comparación de valores falsos en JavaScript

Un valor falso es una variable que se evalúa como false. En JavaScript, hay siete valores falsos: false, 0, "", [], null, undefined, NaN.

Hay un par de reglas simples cuando se trata de usar el operador doble igual en valores falsos:

• false, 0 y "" son equivalentes
• undefined y null regreso true en comparación con ellos mismos o entre sí, y false en comparación con cualquier otra cosa
• NaN comparado con cualquier cosa (incluso otro NaN) devoluciones false

Entonces, todos estos serían true:

> false == 0;
true
> false == "";
true
> 0 == "";
true
> undefined == null;
true
> undefined == undefined;
true
> null == null;
true
> [] == false;
true
> [] == 0;
true

Mientras que todos estos serían false:

> undefined == false;
false
> 0 == null;
false
> null == true
false
> NaN == false;
false
> NaN == NaN;
false

Operador de igualdad estricta en JavaScript (===)

Triple igual en JavaScript significa igualdad estricta. Esto significa que, a diferencia del operador de igualdad flexible del que hablamos antes, no hay conversión implícita. Lo que significa que la salida no será true a menos que tanto el tipo y valores de las dos expresiones coinciden. Ya no se corresponden con el tipo.

Ahora, echemos un vistazo a algunos ejemplos de operadores de igualdad estrictos:

> true === true
true
> true === 1
false
> false === 0
false

Este ejemplo produce true en el primer caso porque tanto el tipo (booleano) y valor (true) son iguales. En los otros dos casos, vuelve false, porque aunque los valores son los mismos, los tipos no coinciden. Estamos comparando un booleano con un número entero.

> 42 === 42
true
> 42 === "42"
false

Aquí, tanto el número como el valor son iguales en el primer ejemplo, lo que resulta en true, mientras que el valor y el tipo no coinciden en el segundo ejemplo, lo que resulta en false.

Conclusión

En este artículo explicamos la diferencia entre el operador de igualdad flexible y el operador de igualdad estricta en JavaScript.
También explicamos qué tipo de coerción era y el concepto de coerción de tipo explícita e implícita.

Puede que hayas notado que la coerción de tipo implícita que ocurre cuando usamos el operador de igualdad flexible en JavaScript puede ser bastante impredecible y contraintuitivo. Por eso, si no tiene mucha experiencia con JavaScript, generalmente es mejor ceñirse al operador de igualdad estricta al verificar si las dos expresiones son iguales o no.

Al utilizar el operador de igualdad estricta, está probando tanto el tipo como el valor y, por lo tanto, puede estar seguro de ejecutar siempre una prueba de igualdad verdadera.