== Vs === Por qué no todo es igual (y menos en Javascript) - El Mundo de Angular

== Vs === Por qué no todo es igual (y menos en Javascript)

Si alguna vez lo notaste, en Javascript no todos los operadores de igualdad son iguales ;). En particular, estoy hablando de == (doble igual) y de === (triple igual). De hecho, aunque en apariencia hacen cosas parecidas, en muchos casos se comportan de forma completamente diferente. El buen manejo de estos dos operadores es esencial para un un buen desarrollo y para no incorporar errores no deseados. Pero bueno, ¡vamos a ver qué es todo esto!

Doble Igual (==)

Cuando en nuestro código queremos comparar dos variables, podemos usar este operador para chequear que esas dos variables sean iguales, pero… ¡cuidado!, porque si las dos variables que queremos comparar son de diferente tipo, el comportamiento de nuestro código puede volverse «raro».

Para entender un poco mejor la explicación, fijáte mi post de Dynamic Typing.

Como sabrás (al menos después de leer el post de Dynamic Typing), Javascript es dynamic typing y eso conlleva que el motor aplique coerción para transformar una variable de un tipo a otro. Muchas veces esa transformación no es la que esperamos, estoy puede verse mucho al usar el operador «==».

Básicamente, el operador == lo que hace es comparar 2 valores PERO lo hace sin chequear el tipo de las variables.

Operador doble Igual (==): compara 2 valores PERO lo hace sin chequear el tipo de las variables

Con esto quiero decir lo siguiente: si por ejemplo, tengo una variable que es numérica y vale 1 y tengo un variable string que vale ‘1’, al compararlas con este operador, la respuesta dará TRUE:


var a = 1;
var b = '1'
if (a == b) {
    console.log('son iguales')
} else {
    console.log('son diferentes')
}

Esto imprime en pantalla ‘son iguales’, sí, exacto, aunque sean tipos distintos; como Javascript convierte las dos variables al mismo tipo usando coerción, estas dos variables terminan siendo iguales.

Coerción: convertir el valor de una variable de un tipo a otro, por ejemplo convertir el valor ‘1’ (de Tipo string)numérico, daría como resultado el valor 1 (de tipo numérico)

Pero ¿qué pasa si comparamos el valor falso con el número cero?


var a = false;
var b = 0;
if (a == b) {
    console.log('son iguales')
} else {
    console.log('son diferentes')
}

Esto también imprime en pantalla ‘son iguales’. Y ¿por qué? porque cuando Javascript convierte 0 (cero) a boolean, para el motor Javascript, 0 (cero) se convierte en falso, entonces se pregunta si FALSO es igual a FALSO y la condición retorna TRUE imprimiendo en pantalla ‘son iguales’.

¿Un caso mas, que muestra en pantalla lo siguiente?


var a = '';
var b = 0;
if (a == b) {
    console.log('son iguales')
} else {
    console.log('son diferentes')
}

Esto también imprime ‘son iguales’ aunque el número 0 y el string vacío » sean muy distintos. Ya que, a la variable «a» cuyo valor es un string vacío, al convertirlo a un valor numérico, éste es igual a 0 (cero).

Y ¿cómo hago cuando quiero comparar teniendo en cuenta TAMBIÉN el tipo de la variable?

¡Adivinaste!, usando el operador triple igual (===)

Triple igual (===)

En resumidas cuentas, el triple igual chequea el contenido de la variable y además, chequea que las dos variables sean del mismo tipo. Es por eso que se dice que es más seguro que el == (doble igual).

Operador triple Igual (===): chequea el contenido de la variable y además, chequea que las dos variables sean del mismo tipo.

Volviendo al ejemplo anterior:


var a = 1;
var b = '1';
if (a === b) {
    console.log('son iguales')
} else {
    console.log('son diferentes')
}

En este caso, como «a» y «b» no son del mismo tipo, se imprime en consola ‘son diferentes‘.

Con el ejemplo:


var a = false;
var b = 0;
if (a === b) {
    console.log('son iguales')
} else {
    console.log('son diferentes')
}

También se muestra en consola ‘son diferentes’ ya que «a» del tipo boolean y «b» del tipo numérico son de diferente tipo.

Por último:


var a = '';
var b = 0;
if (a === b) {
    console.log('son iguales')
} else {
    console.log('son diferentes')
}

Como podés suponer, también imprime en consola ‘son diferentes’.

Conclusión

Como podés ver, hay una gran gran diferencia entre usar == y ===, de hecho, su mal uso puede acarrearte bugs indeseados. Por eso, ante la duda, usá siempre === y te ahorrás más de un dolor de cabeza.

About the Author

Mi nombre es Gustavo Hernán Dohara, soy Ingeniero en Sistemas y, sobre todas las cosas, soy un apasionado por la tecnología; tengo más de 10 años de experiencia en diferentes tecnologías y he decidido compartir mis conocimientos y experiencias con cualquiera que desee aprender: alumnos, empleados, freelancers y vos. Al ritmo que cada uno pueda, en el horario en que cada uno pueda y en el lugar que cada uno elija.

 ¡OFERTA! 

 101 Preguntas Sobre javascript

Que te Harán En Cualquier Entrevista (Con Sus Respuestas)