Operadores de Comparação JavaScript: Guia Completo

Introdução

Neste laboratório, os alunos explorarão os operadores de comparação JavaScript através de um exercício prático em HTML e JavaScript. O laboratório guia os participantes através da configuração de um arquivo HTML e demonstra progressivamente vários operadores de comparação, incluindo os operadores maior que, menor que, igualdade e igualdade estrita.

Os participantes aprenderão a usar operadores de comparação escrevendo código JavaScript dentro de uma tag de script HTML, experimentando diferentes comparações numéricas e de valores, e observando os resultados no console do navegador. Ao final do laboratório, os alunos entenderão como aplicar operadores de comparação para avaliar as relações entre valores e compreender seu comportamento em diferentes cenários.

Configurar o Arquivo HTML para Operadores de Comparação

Nesta etapa, você configurará um arquivo HTML básico para explorar os operadores de comparação JavaScript. Criaremos um arquivo HTML com um script JavaScript embutido que nos ajudará a entender como os operadores de comparação funcionam.

Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado comparison-operators.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Comparison Operators</title>
  </head>
  <body>
    <h1>Exploring Comparison Operators</h1>
    <p>
      Open the browser console to see the results of our comparison operators.
    </p>

    <script>
      // We'll add our comparison operator examples here
      console.log("HTML file setup complete!");
    </script>
  </body>
</html>

Vamos detalhar os componentes-chave deste arquivo HTML:

A declaração <!DOCTYPE html> garante que o navegador use o modo padrão.
Incluímos uma tag <script> simples onde escreveremos nosso código JavaScript.
A instrução console.log() nos ajudará a verificar se o arquivo está funcionando corretamente.

Para visualizar o arquivo, você normalmente o abriria em um navegador da web e verificaria o console do desenvolvedor do navegador. Em nosso ambiente LabEx, verificaremos a criação e o conteúdo do arquivo.

Demonstrar os Operadores Maior Que e Menor Que

Nesta etapa, você aprenderá sobre os operadores de comparação maior que (>) e menor que (<) em JavaScript. Abra o arquivo comparison-operators.html da etapa anterior e modifique a seção <script> para explorar esses operadores.

Atualize o script com o seguinte código:

<script>
  // Greater Than (>) Operator
  console.log("Greater Than Operator Examples:");
  console.log(10 > 5); // true
  console.log(5 > 10); // false
  console.log(5 > 5); // false

  // Less Than (<) Operator
  console.log("\nLess Than Operator Examples:");
  console.log(5 < 10); // true
  console.log(10 < 5); // false
  console.log(5 < 5); // false

  // Comparing different types
  console.log("\nComparing Different Types:");
  console.log(5 < "10"); // true (type coercion)
  console.log(10 > "5"); // true (type coercion)
</script>

Esses exemplos demonstram as características-chave dos operadores maior que e menor que:

Quando o valor da esquerda é maior, > retorna true
Quando o valor da esquerda é menor, > retorna false
Quando os valores são iguais, tanto > quanto < retornam false
JavaScript realiza coerção de tipo (type coercion) ao comparar diferentes tipos

Abra o console do navegador para ver os resultados da comparação. Cada console.log() mostrará o resultado da comparação.

Praticar os Operadores de Igualdade e Desigualdade

Nesta etapa, você explorará os operadores de igualdade (==) e desigualdade (!=) em JavaScript. Abra o arquivo comparison-operators.html e atualize a seção <script> com o seguinte código:

<script>
  // Equality Operator (==)
  console.log("Equality Operator Examples:");
  console.log(5 == 5); // true
  console.log(5 == "5"); // true (type coercion)
  console.log(5 == 10); // false

  // Inequality Operator (!=)
  console.log("\nInequality Operator Examples:");
  console.log(5 != 10); // true
  console.log(5 != "5"); // false (type coercion)
  console.log(5 != 5); // false

  // Comparing different types
  console.log("\nComparing Different Types:");
  console.log(0 == false); // true (type coercion)
  console.log(1 == true); // true (type coercion)
  console.log("" == false); // true (type coercion)
</script>

Pontos-chave sobre os operadores de igualdade e desigualdade:

O operador == realiza coerção de tipo (type coercion) antes da comparação
== retorna true se os valores são os mesmos após a conversão de tipo
O operador != verifica se os valores não são iguais, também com coerção de tipo
A coerção de tipo pode levar a resultados inesperados

Abra o console do navegador para ver os resultados da comparação. Cada console.log() exibirá o resultado das comparações.

Compreender os Operadores de Igualdade e Desigualdade Estritas

Nesta etapa, você aprenderá sobre os operadores de igualdade estrita (===) e desigualdade estrita (!==) em JavaScript. Abra o arquivo comparison-operators.html e atualize a seção <script> com o seguinte código:

<script>
  // Strict Equality Operator (===)
  console.log("Strict Equality Operator Examples:");
  console.log(5 === 5); // true
  console.log(5 === "5"); // false (no type coercion)
  console.log(0 === false); // false
  console.log(1 === true); // false

  // Strict Inequality Operator (!==)
  console.log("\nStrict Inequality Operator Examples:");
  console.log(5 !== 10); // true
  console.log(5 !== "5"); // true (no type coercion)
  console.log(0 !== false); // true
  console.log(1 !== true); // true

  // Comparing with type coercion vs. strict comparison
  let num = 5;
  let strNum = "5";
  console.log("\nComparing with == vs. ===:");
  console.log(num == strNum); // true (type coercion)
  console.log(num === strNum); // false (strict comparison)
</script>

Diferenças-chave entre comparação solta e estrita:

=== verifica tanto o valor quanto o tipo sem coerção de tipo
!== é o operador de desigualdade estrita
Operadores estritos evitam conversões de tipo inesperadas
Sempre prefira === e !== para comparações mais previsíveis

Abra o console do navegador para ver os resultados da comparação. Cada console.log() exibirá o resultado das comparações.

Experimentar com os Resultados dos Operadores de Comparação

Nesta etapa, você explorará cenários mais complexos com operadores de comparação e aprenderá como eles interagem com diferentes tipos de valores. Abra o arquivo comparison-operators.html e atualize a seção <script> com o seguinte código:

<script>
  // Comparing different types and complex scenarios
  console.log("Complex Comparison Scenarios:");

  // Comparing null and undefined
  console.log(null == undefined); // true (type coercion)
  console.log(null === undefined); // false (strict comparison)

  // Comparing with NaN
  console.log(NaN == NaN); // false (special case)
  console.log(NaN === NaN); // false

  // Comparing objects
  let obj1 = { value: 5 };
  let obj2 = { value: 5 };
  let obj3 = obj1;
  console.log("\nObject Comparisons:");
  console.log(obj1 == obj2); // false (different references)
  console.log(obj1 === obj2); // false (different references)
  console.log(obj1 === obj3); // true (same reference)

  // Chained comparisons
  let x = 5;
  console.log("\nChained Comparisons:");
  console.log(1 < x && x < 10); // true
  console.log(1 < x < 10); // Warning: This doesn't work as expected!
</script>

Principais insights desses experimentos:

null e undefined se comportam de maneira diferente com igualdade solta e estrita
NaN nunca é igual a si mesmo
Comparações de objetos dependem da referência, não do conteúdo
Comparações encadeadas podem ser complicadas e podem não funcionar como esperado

Abra o console do navegador para ver os resultados da comparação e entender o comportamento diferenciado dos operadores de comparação.

Resumo

Neste laboratório, os participantes exploram os operadores de comparação JavaScript por meio de um exercício prático em HTML e JavaScript. O laboratório começa configurando um arquivo HTML básico com um script embutido, permitindo que os alunos entendam e pratiquem várias técnicas de comparação, como os operadores maior que, menor que, igualdade e igualdade estrita.

Ao trabalhar com exemplos práticos no console do navegador, os alunos obtêm insights sobre como os operadores de comparação funcionam, aprendendo a avaliar diferentes tipos de comparações numéricas e de valores. O laboratório fornece uma abordagem estruturada para entender esses operadores JavaScript fundamentais, permitindo que os participantes experimentem diferentes cenários e observem os resultados booleanos resultantes.

Explore Operadores de Comparação em JavaScript