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.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *