Javascript: Como utilizar os operadores de comparação

Conheça as diferenças entre os operadores de comparação == e === (!= e !==) no JavaScript e a influência que eles podem ter no seu código.

O Javascript tem dois tipos de operadores de igualdade: igualdade fraca ou abstrata (==) e igualdade estrita (===). A recomendação é de sempre usar esta última.

Uma comparação estrita (usando, ===) só é válida se os operandos forem do mesmo tipo e se o conteúdo de ambos corresponderem. A comparação abstrata (usando, ==), é mais comum, mas ela transforma(converte) os operandos antes da comparação, e isso pode gerar incontáveis problemas.

No final do artigo tem uma calculadora com os os operadores de comparação em Javascript pra você entender na prática o conceito.

Características das comparações:

Duas Strings são estritamente iguais quando têm a mesma sequência de caracteres com o mesmo comprimento e nas posições correspondentes.
Quando são numericamente iguais (têm o mesmo valor numérico), dois números são estritamente iguais . NaN não é igual a nada, incluindo NaN. Os zeros positivos e negativos são iguais uns aos outros.
Se ambos são verdadeiros, ou ambos são falsos, dois operandos booleanos são estritamente iguais.
Para comparações estritas ou abstrata, dois objetos distintos nunca são iguais.
A expressão comparando objetos só é verdadeira se os operandos se referirem ao mesmo objeto.
Null e undefined são estritamente iguais a si mesmos e abstratamente iguais um ao outro.

Operadores de comparação

Igualdade fraca ou abstrata (==)

O operador de igualdade fraca, o mais comun em Javascript, converte (temporariamente) os operandos durante a comparação se eles não forem do mesmo tipo. Após a conversão uma comparação estrita é utilizada. Se ambos os operandos são objetos, JavaScript compara as referências internas, que só serão as mesmas se os operandos de memória se referirem ao mesmo objeto.

1 == 1 // true
'1' == 1 // true
1 == '1' // true
0 == false // true
0 == null // false
0 == undefined // false
null == undefined // true

Desigualdade fraca ou abstrata (!=)

O operador de desigualdade fraca funciona de forma extremamente semelhante ao operador acima, a diferença é que ele retorna verdadeiro se os operandos forem diferentes. A conversão de tipos também acontece aqui.

1 != 1 // false
"1" != 1 // false
1 != '1' // false
0 != false // false
0 != null // true
0 != undefined // true
null != undefined // false

Igualdade estrita (===)

O operador de igualdade estrita retorna verdadeiro se os operandos forem estritamente os mesmos, ou seja, se contiverem o mesmo valor e forem do mesmo tipo (sem conversão de tipo).

1 === 1 // true
"1" === 1 // false
1 === '1' // false
0 === false // false
0 === null // false
0 === undefined // false
null === undefined // false

Desigualdade estrita (!===)

O operador não-identidade retorna verdadeiro se os operandos não forem iguais e/ou não forem do mesmo tipo.

1 !== 1 // false
"1" !== 1 // true
1 !== '1' // true
0 !== false // true
0 !== null // true
0 !== undefined // true
null !== undefined // true

Comparação entre Objetos

Se você está trabalhando com objetos em Javascript, vou tratar apenas de objetos simples aqui, não vamos lidar com objetos aninhados agora. A comparação restrita e abstrata funciona de maneiras diferentes dos tipos primitivos, como já mencionei.

Para os tipos de referência == e === agem consistentemente uns com os outros. Seguindo a regra, ambos operadores retornam falso porque mesmo que eles tenha os mesmos valores, eles tem endereço de memória diferentes o que fazem deles objetos diferentes.

[1,2,3] == [1,2,3];  // false
[1,2,3] === [1,2,3]; // false

{ x: 1, y: 2 } == { x: 1, y: 2 }  // false
{ x: 1, y: 2 } === { x: 1, y: 2 } // false

Como não poderia faltar em Javascript, existe um caso especial. Quando você compara uma String literal com um Objeto que tem o mesmo valor da String literal.

Por exemplo, considere a comparação de uma string literal com um objeto string criado pelo construtor String.

"abc" == new String("abc")    // true
"abc" === new String("abc")   // false

Aqui o operador == está verificando os valores dos dois operandos e retornando verdadeiro, pois após a conversão eles são estritamente iguais.

Já o operador === verifica se eles são do mesmo tipo. Uma String literal e uma string criada com o construtor não são iguais, por isso ele retorna false.

Qual deles está correto? Isso realmente depende do que você está tentando comparar. Meu conselho é ignorar completamente a questão e simplesmente não usar o construtor de String para criar objetos string. E use o comparador restrito (===), diminua a quantidade de problemas na sua vida.

Você pode testar nessa calculadora aqui abaixo o que você aprendeu, o código da calculadora você encontra nesse link.