Los operadores de comparación en javascript

Desde hace algún tiempo cada vez invierto más horas de mi jornada laboral en programar en javascript. A medida que vas programando en este lenguaje te vas dando cuenta de las muchas peculiaridades que tiene, y que te puede arruinar una jornada laboral.

Para los que vienen de programar en lenguajes como C# este tipo de sentencias son de lo más normales

if (a == b) { 
  // a y b son iguales
}

El problema está en que javascript las cosas no son como nosotros estamos acostumbrados que sean y este comparador nos pueden dar algún que otro quebradero de cabeza y más teniendo en cuenta que también tenemos un triple comparador, si como lo oyes, tenemos un triple comparador que se escribe ===.

Entonces, ¿cuál es la diferencia entre == y ===? Pues bien, el doble comparador por decirlo de una manera hace una comparación por valor y en caso que los tipos no sean igual javascript hace una coerción de tipos. El triple comparador, al contrario que el doble comparador, por decirlo de alguna manera fuerza la igualdad de tipos y del valor que estamos comparando.

Sabiendo esto, tenemos que estar atento a la hora de comparar variables porque javascript puede resolver la comparación de la manera que nosotros no esperamos.

Algunos ejemplos para que todo quede más claro

1 == 1            // true como era de esperar
1 == "1"          // true, se convierte la cadena de texto a numero
null == undefined // true
1 == true         // true
"" == false       // true
'\n' == false     // true, el '\n' se interpreta como la cadena vacía
"" == 0           // true
'\n' == 0         // true

Como vemos en todas las comparaciones (salvo la primera) esperaríamos que javascript nos devolviera false, sin embargo nos devuelve true. Para salvar esto deberíamos usar el triple comparador.

1 === 1            // sigue siendo true
1 === "1"          // false
null === undefined // false
1 === true         // false
"" === false       // false
'\n' === false     // false
"" === 0           // false
'\n' === 0         // false

De igual forma que tenemos == y ===, también tenemos != y !== cuyo comportamiento es análogo.

Otras comparaciones curiosas pero menos comunes son

NaN == NaN  // false, NaN es Not a Number y no se puede comparar
NaN === NaN // false
1.0 == 1    // true
1.0 === 1   // true, para javascript ambos son de tipo numeric

La coerción de tipos puede ser algo realmente frustrante y que nos puede volver locos un par horas, pero que nos puede venir bastante bien en algunas situaciones por lo que lo mejor es estar seguro de lo que estamos haciendo en cada momento.

Happy coding!