JavaScript: == vs === Operador

En este tutorial, repasaremos la diferencia entre los operadores de igualdad flexibles == y estrictos === en JavaScript con ejemplos.

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 verdadero y falso si no lo son.

Los operadores de comparación en JavaScript son:

  • < - menor que
  • > - mayor que
  • <= - menor o igual que
  • >= - mayor o igual que
  • == y === - igual a (operador de igualdad flexible y estricta)
  • != y !== - no es igual a (operador de desigualdad flexible y estricto)

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 los operadores de igualdad flexible y estricta y repasaremos algunos ejemplos de su uso.

Operador de igualdad suelta en JavaScript (==) {#operador de igualdad suelta en javascript}

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

El proceso de convertir un valor de un tipo a otro se denomina coerción de tipos. El tipo de coerción puede ser explícito e implícito.

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

Por ejemplo:

1
2
3
4
5
// 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 por JavaScript. Este tipo de coerción generalmente se realiza cuando usamos operadores en diferentes tipos, pero uno de ellos puede “combinar” razonablemente, por ejemplo:

1
2
// 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 de JavaScript:

La expresión debe ser evaluada y asignada a x. El primer número es 1 y tiene el 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 emparejémoslas 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
el operador +, que en este caso es una cadena.

1
2
3
4
5
6
7
/* 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, es exactamente este tipo de coerción el que usa el operador == para verificar la igualdad. Repasemos algunos ejemplos del uso del operador de igualdad flexible, en el nodo REPL:

1
2
3
4
> 42 == "42"
true
> "42" == '42'
true

42, "42" y '42'' se combinan en el mismo tipo de datos, y todos son ligeramente iguales, devolviendo true` en las comparaciones.

Los booleanos siguen el mismo principio:

1
2
3
4
5
6
7
8
> true == 1
true
> true + true == 2
true
> false == 0
true
> false + true == 1
true

verdadero es 1 y falso es 0. Podemos convertirlos implícitamente en números enteros al sumarlos.

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

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

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

Comparación de valores falsos en JavaScript

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

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

  • falso, 0 y "" son equivalentes
  • undefined y null devuelven true cuando se comparan entre sí o false cuando se comparan con cualquier otra cosa
  • NaN comparado con cualquier cosa (incluso con otro NaN) devuelve falso

Entonces, todo esto sería verdadero:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
> false == 0;
true
> false == "";
true
> 0 == "";
true
> undefined == null;
true
> undefined == undefined;
true
> null == null;
true
> [] == false;
true
> [] == 0;
true

Mientras que todo esto sería falso:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
> undefined == false;
false
> 0 == null;
false
> null == true
false
> NaN == false;
false
> NaN == NaN;
false

Operador de igualdad estricta en JavaScript (===) {#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á verdadera a menos que tanto el tipo como los valores de las dos expresiones coincidan. Ya no coinciden en tipo.

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

1
2
3
4
5
6
> true === true
true
> true === 1
false
> false === 0
false

Este ejemplo produce verdadero en el primer caso porque tanto el tipo (booleano) como el valor (verdadero) son iguales. En los otros dos casos, devuelve falso, porque aunque los valores son los mismos, los tipos no coinciden. Estamos comparando un booleano con un entero.

1
2
3
4
> 42 === 42
true
> 42 === "42"
false

Aquí, tanto el número como el valor son iguales en el primer ejemplo, lo que da como resultado “verdadero”, mientras que el valor y el tipo no coinciden en el segundo ejemplo, lo que da como resultado “falso”.

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é era la coerción de tipo y el concepto de coerción de tipo explícita e implícita.

Es posible que haya notado que la coerción implícita de tipo que ocurre cuando usamos el operador de igualdad flexible en JavaScript puede ser bastante impredecible y [contra-intuitivo] (http://www.jsfuck.com/). Esta es la razón por la que, si no tiene mucha experiencia con JavaScript, normalmente es mejor ceñirse al operador de igualdad estricto al comprobar si las dos expresiones son iguales o no.

Al usar 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.