¿Debo usar == o === en Javascript y cuál es la diferencia entre los dos?

¡Depende!

¿Entonces cuál es la diferencia?

== y === son ambos controles de igualdad. La diferencia es que == permite la coerción de tipo, mientras que === no. [1]

No sería una forma correcta de pensar decir que uno compara valor y tipo, mientras que el otro solo compara valor.

Sería correcto pensar que uno coacciona los tipos antes de comparar valores.

Entonces, ¿cuándo los usarías?

Justo hoy, tuve una situación en la que alguien obtenía un atributo de datos de un elemento. Ese atributo de datos tenía un valor de 12 . Así que imagina

if (element.dataset.foo == 12) {
// funciona si estaba en el data-foo era 12 o ’12’
}

¿Cuándo se vuelve problemático?

Tuve otro escenario, también con un atributo de datos, donde no podíamos usar la coerción de tipo. Teníamos un atributo de datos que debería contener el valor “falso”. Imagina

if (element.dataset.isFoo == true) {
// no evaluará, tal como queremos
}
if (element.dataset.isFoo == false) {
// tampoco evaluará. ¿Eh?
}

Entonces, eso es raro. Mi atributo de datos no es verdadero. Tampoco es falso. ¿Cómo? ¡Estamos usando la coerción de tipo!

Porque un booleano obliga a un número; un booleano no coacciona a una cadena. No entendimos cómo funcionaba la coerción de tipo. Eso deja una forma correcta de escribir esto:

if (element.dataset.isFoo == ‘false’) {
// evalúa y ejecuta, por las razones correctas
}

En el ejemplo anterior, podría haber escrito ( element.dataset.isFoo === 'false') , pero eso habría sido innecesario. [2] Solo estás comparando dos cadenas.

¿Es uno mejor?

Hay una pequeña pérdida de rendimiento cuando usa == , pero es pequeña. Kyle Simpson señala que == puede ser millonésimas de segundo más lento. eso no es una justificación para usar ===

Sé inteligente con tus controles de igualdad

Use la coerción de tipo intencionalmente. Donde te encuentras con problemas es con la actitud siempre / nunca de == . Si nunca te molestas en aprender cómo funciona, entonces parece más problemático de lo que vale. Pero si aprende su mecánica, encontrará mucho valor al usarlo.

El libro de Kyle Simpson “No sabes JS: Tipos y gramática” es una guía invaluable para entender cómo funciona la coerción de tipos en JS.

Notas al pie

[1] getify / You-Dont-Know-JS

[2] ¿Cómo puedo convertir una cadena a booleana en JavaScript?

ES-Lint tiene una buena página sobre esto. A menudo es preferible usar === .

La razón principal por la que los programadores deberían === en lugar de == es la claridad.

Cuando se le da a == b , un compilador de JavaScript verificará si a y b son del mismo tipo, y si no, escribirá uno de ellos. Por ejemplo, false == [] se evaluará como true porque [] está vacío y, por lo tanto, es falso.

false === [] , por otro lado, se evaluará como false porque false y [] son tipos diferentes.

Esencialmente, el uso de === evitará falsos positivos no deseados.

Depende de dónde se implemente. En general, es una buena práctica usar “===” que “==”.

JavaScript es un lenguaje poco escrito y, por lo tanto, no mencionamos el tipo de variable cuando se declara y también está sujeta a cambios más adelante en el programa. Entonces, cuando se compara la cadena “150” y el número 150, el motor de JavaScript los obliga al tipo requerido y los verifica y devuelve verdadero cuando se usa doble igual, aunque en el mundo real, lo cual no es cierto. Sin embargo, cuando se utiliza triple igual, los números se verifican estrictamente con sus respectivos tipos y, por lo tanto, se devuelve falso como resultado de la declaración. Así que usar triples iguales es beneficioso y siempre lo uso. Obtenga más información sobre la coerción y la igualdad estricta en Mozilla e intente aprovechar sus ventajas.

Utilice `===` siempre para evitar errores inesperados.

Para responder la segunda parte de su pregunta, tomemos un ejemplo.

0 == ‘0’ // verdadero
0 === ‘0’ // falso

Doble igual (==) intenta forzar los valores antes de verificar la condición. Entonces, diferentes tipos , pero los mismos valores coinciden.

Triple igual (===) verifica el tipo y el valor .

El operador == es una verificación de igualdad suelta ; es decir, se permite convertir valores entre diferentes tipos cuando se prueba la igualdad. Por ejemplo, se encuentra que la cadena ’17’ es igual al número 17.

El operador === es un estricto control de igualdad . Es decir, solo devuelve verdadero si los valores en cada lado son iguales y del mismo tipo.

En cada caso que se me ocurra, es mejor usar === porque evita muchas “trampas”. Por ejemplo, las siguientes afirmaciones se evalúan como verdaderas:

0 == ”
0 == ‘0’
falso == ‘0’
‘\ t \ r \ n’ == 0

mientras que estas declaraciones se evalúan como falsas:

” == ‘0’
falso == indefinido
falso == nulo

Cada comportamiento ocurre por una razón, pero la mayoría de los programadores los encuentran altamente contradictorios, y por experiencia, usar === en su lugar tiende a generar menos errores en el código final.

Esta es una característica de JavaScript. Esto asegura la pérdida de escritura de tipos de datos. Algunas personas sienten que esto es una mala parte de JavaScript. Pero en realidad no lo es.

Aquí hay una explicación rápida. Siempre use === (triple) y casi no hay tiempo en el que realmente quiera usar == (doble) .

Triple es igual a ===: devuelve verdadero solo si ambos operandos son del mismo TIPO y el mismo VALOR . Por ejemplo, 0 === ‘0’ devuelve falso.

Doble es igual a ==: funciona bien solo en caso de que los operandos sean del mismo tipo. Verifica solo VALOR . Por ejemplo, 0 == ‘0’ devuelve verdadero.