Artigos JavaScript JavaScript: como e quando utilizar os operadores == e ===

Um dos principais problemas que iniciantes no JavaScript enfrentam é não saber diferenciar os operadores javascript de igualdade == e ===. Esse mesmo comentário é válido para os operadores javascript de 'desigualdade' != e !==. Por eles não estarem presentes na maioria das linguagens, muitos iniciantes cometem o erro de utilizá-los de forma indiscriminada. Essa falta de conhecimento, no entanto, pode levar a alguns problemas no código, por exemplo, na comparação entre a string "1" e o número, inteiro, 1. Nesse artigo, vamos entender em que situações temos igualdade entre valores e quais operadores devem ser utilizados em casos comuns de uso no dia a dia.

Relacionado: JavaScript Replace

Operadores javascript de igualdade e desigualdade

O JavaScript é uma linguagem com variáveis que não são fortemente tipadas. Isso significa que, embora as variáveis possuam tipos, eles só são atribuídos em tempo de execução. Por isso, não há definição explícita do tipo de dado: tudo é feito utilizando o termo "var". Por exemplo, um dado do tipo inteiro é definido como var i = 0;, enquanto um dado do tipo string é definido como var s = 'texto';.

Devido a essa característica, o JavaScript possui dois tipos de operadores de igualdade e dois de desigualdade: == e === e != e !==. Em linguagens como o C#, temos somente o primeiro deles. Nessas linguagens, o operador == verifica a igualdade entre os valores, considerando, além do valor propriamente dito, o tipo dele.

No JavaScript, como os tipos das variáveis nem sempre são levados em consideração, há duas opções: o operador == (e o mesmo vale para o operador !=), que não leva em consideração o tipo de dados; e o operador === (e também !==), que considera o tipo de dados, o que possibilita afirmar que os valores são, de fato, iguais.

Igual? Ou parecido?

Então, qual seria a diferença entre trabalhar com == ou === no JavaScript? Tudo envolve o tipo das variáveis que estão sendo comparadas: == não leva esse tipo em consideração, enquanto === leva. Logo, expressões como as apresentadas abaixo gerariam resultados diferentes, como é possível verificar pelo nome das variáveis criadas. Assim, o primeiro caso, utilizando ==, é verdadeiro (true), enquanto o segundo caso, utilizando ===, é falso (false). Nesse último, a falsidade ocorre porque o JavaScript leva em consideração o tipo do dado: string não é igual a integer, embora o dado em si seja o mesmo.


var verdadeiro = '1' == 1;
var falso = '1' === 1;

Para entendermos melhor esse conceito, é importante que façamos a análise de uma série de expressões, como as mostradas na Listagem 1. Repare que temos expressões envolvendo vários tipos de dados.


01 var var1 = 'true' == true;                 // false
02 var var2 = '0' == false;                   // true
03 var var3 = null == undefined;              // true
04 var var4 = false == null;                  // false
05 var var5 = null == 0;                      // false
06 var var6 = '' == 0;                        // true
07 var var7 = '\t\n' == 0;                    // true
08 var var8 = '1' == true;                    // true
Listagem 1. Expressões de igualdade/desigualdade

Linha 01: false. Pelo que vimos até agora, algo assim provavelmente seria verdadeiro, uma vez que, visualmente e sem levar em consideração o tipo de dados, os valores são iguais. Entretanto, o JavaScript, internamente, trata os valores true e false como 1 e 0, respectivamente;

Linha 02: true. O motivo é o mesmo atestado na explicação para a linha 01. O JavaScript trata false como 0, internamente;

Linha 03: true. Essencialmente, são valores diferentes. O primeiro denota a ausência de um valor (null), enquanto o segundo denota um valor que ainda não foi definido (undefined). Para o JavaScript, entretanto, são considerados iguais quando não há um tipo envolvido. Como null possui um tipo, expressões como var varX = null === undefined; retornam false;

Linhas 04 e 05: ambas resultam em false. O motivo para isso é o mesmo. O valor false é tratado como 0, internamente. Assim, trata-se da comparação da "ausência de valor" (null) com o valor 0;

Linha 06: true. Internamente, a string vazia é tratada como 0, quando o tipo não é considerado;

Linha 07: true. Os valores \t (tab) e \n (nova linha) não são considerados caracteres. Assim, a string é considerada vazia, recaindo no resultado da linha 06;

Linha 08: true. Pelo mesmo motivo apontado na explicação da linha 01, internamente, o valor true é tratado como 1 pelo JavaScript.

Pelo que podemos observar, existe uma série de discrepâncias entre o comportamento tido como normal, a que estamos acostumados, e o que o == nos traz. Assim, salvo em casos muito específicos, sempre utilize o operador === (ou !==). Ele tornará seu código mais seguro, evitando problemas de tipos diferentes e valores iguais.

Saiba mais sobre JavaScript:
  • Curso completo de JavaScript: Em nosso curso de Javascript veremos todos os conceitos dessa linguagem de programação desde os conceitos básicos até os mais avançados, para que o aluno tenho uma formação completa de Javascript.
  • Introdução ao Javascript: Veja neste artigo uma breve introdução, de forma simples e prática, à linguagem de scripting Javascript, que tem se consolidado como uma das bases do desenvolvimento web.
  • Introdução ao JavaScript: Nesse guia conheceremos a linguagem de programação JavaScript, baseada em scripts client-side de páginas web e orientada a objetos. Veremos a sintaxe básica e bibliotecas que vão nos ajudar a criar páginas ricas em recursos.