Não sabe direito qual a diferença entre os variados tipos de comparação em JavaScript? Quando usar ==, ===, != ou !==? Acompanhe este artigo e você vai ter todas as informações de que precisa.
O JavaScript tem duas formas de comparar valores. Uma forma é mais rigorosa (===), enquanto na outra ocorre uma conversão de tipo (==). Exemplo: 1 == '1' (true). 1 === '1' (false).
Apesar de ser um conceito simples, entender alguns detalhes a respeito de comparações em JavaScript podem te fazer economizar muito tempo.
Operadores == vs ===
Em JavaScript temos dois operadores de comparação bastante similares, mas que na prática proporcionam resultados muito diferentes.
Quando utilizamos três sinais de igual ===, é realizado o que se chama de comparação estrita. É comparado primeiramente o tipo dos dois valores em questão, e em seguida são comparados os valores de fato.
Quando utilizamos dois sinais de igual ==, é realizado uma comparação abstrata. Primeiro é feita uma tentativa de converter os valores para o mesmo tipo e em seguida é realizada a comparação.
Veja o exemplo abaixo que ilustra cada tipo de comparação e seus resultados.
console.log(1 === 1); // true
console.log(1 === '1'); // false
console.log(1 == 1); // true
console.log(1 == '1'); // true
A operação 1 === '1' retorna false, pois o tipo do primeiro valor é numérico, enquanto o segundo é uma string, então não é necessário nem comparar os valores, pois na comparação estrita é necessário que tanto o valor quanto o tipo sejam iguais para retornar verdadeiro.
Já a operação 1 == '1' retorna true, pois quando fazemos uma comparação abstrata, será realizada a conversão dos valores para um tipo comum. Neste caso é feita a conversão de string para número e por fim é feita a comparação de valores onde o resultado é verdadeiro.
Em teoria a comparação estrita tende a ser mais rápida, pois não precisa converter os valores, e no caso de serem de tipos diferentes, já retorna falso. Porém a diferença entre os dois métodos de comparação é tão insignificante que este não deve ser o motivo para querer usar um ou outro.
Tudo bem até aqui, veja mais alguns exemplos parecidos:
// É feita a conversão para um tipo comum e em seguida a comparação
console.log(22 == '22'); // true
// Tipos diferentes (int e string)
console.log(22 === '22'); // false
// Tipos iguais, valores diferentes
console.log(22 === 11); // false
// Tipo e valores iguais
const a = 22;
console.log(a === 22); // true
Agora veja mais um exemplo não tão óbvio:
// Tipos diferentes
console.log(1 === true); // false
console.log(0 === false); // false
// Após a conversão, valores são iguais
console.log(1 == true); // true
console.log(0 == false); // true
Note que zeros e uns podem representar verdadeiro e falso em uma comparação abstrata. E não só estes valores, como outros valores como undefined e null podem representar falso em JavaScript, por isso é útil memorizar algumas ressalvas.
Algumas ressalvas quanto à comparações em JavaScript
Entender estas ressalvas podem te economizar um bom tempo em debugar um código que não funciona. Especialmente em JavaScript, onde algumas operações podem retornar valores como NaN, undefined, null, etc.
Imagine um cenário onde você precisa verificar se o resultado de um cálculo "input" tem o valor "0", mas por algum motivo você errou e inicalizou a variável vazia, então ela vai ter o valor de undefined:
var input;
// ...
if (input == 0) { // undefined == 0 - true
// O código vai ser executado como se o input fosse igual a 0.
}
Utilizar uma comparação abstrata neste caso e não saber sobre outros valores que podem representar false pode te fazer perder horas tentando descobrir o erro.
Veja os exemplos abaixo para entender melhor:
// NaN não é igual a nada, nem a si mesmo.
NaN == NaN; // false
// null e false quando convertidos em um denominador comum, representam essencialmente a mesma coisa
null == false; // true
// undefined e false quando convertidos em um denominador comum, representam essencialmente a mesma coisa
undefined == false; // true
// undefined e null são valores que ao mesmo tempo não são booleanos, mas podem representar false em uma comparação if (undefined) ou if (null)
undefined == null; // true
// Assim como null e undefined, a string vazia apesar de não ser estritamente um valor booleano pode representar falso
'' == false; // true
// Um array vazio também representa false na comparação abstrata, mas quando comparado sozinho em um if, retorna verdadeiro
[] == false; // true
Veja abaixo todos os valores que em JavaScript podem representar false:
-
false- Valor booleano -
'', "" ou ``- Todos os tipos de string vazia. -
0- O número 0, mesmo com sinal negativo, representa false. -
null -
undefined -
NaN- Not a number. -
[]- Array vazio
Lembre-se que ao compararmos tipos complexos de variáveis como arrays ou objetos, os resultados não se baseiam no conteúdo do objeto, mas sim para onde esses objetos apontam. Exemplo:
const obj = { a: 1 };
const obj2 = obj;
// A variável obj e o objeto instanciado { a: 1 } são objetos diferentes
console.log(obj == { a: 1 }); // false
// Assim que obj2 é instanciado, recebe o mesmo endereço de obj, tendo portanto o mesmo valor, até na comparação estrita
console.log(obj === obj2); // true
Operadores !== vs !===
Da mesma forma que os operadores de igualdade abstrata ou estrita, podemos também verificar se dois valores são diferentes de forma estrita ou abstrata.
Exemplos:
// É feita a conversão para tipos iguais e em seguida verifica-se se são diferentes
console.log(1 != '1'); // false
// Os tipos sendo diferentes, o resultado é diferente, portanto a operação é verdadeira
console.log(1 !== '1'); // true
Conclusão
Como você pôde perceber, a não ser que já se tenha uma boa familiaridade com JavaScript, comparações e tipagem de valores podem ser um pouco confusas a princípio.
Entender os resultados das principais comparações abstratas pode ser de grande ajuda, mas em geral é recomendável usar sempre o operador de três iguais, assim você pode ter certeza de que está fazendo uma comparação completa dos valores.
Veja o quadro abaixo que representa o uso de dois iguais e veja como as coisas podem ficar confusas:
Agora veja o quão mais fácil é o uso de três iguais:
Por fim deixo o link da tabela completa de comparação e parafraseio a mensagem do seu autor: "Moral da história: Sempre use 3 iguais, a não ser que você tenha uma boa razão para usar 2".
