Explore Comparison Operators in JavaScript

Introduction

In this lab, students will explore JavaScript comparison operators through a hands-on HTML and JavaScript exercise. The lab guides participants through setting up an HTML file and progressively demonstrating various comparison operators, including greater than, less than, equality, and strict equality operators.

Participants will learn how to use comparison operators by writing JavaScript code within an HTML script tag, experimenting with different numeric and value comparisons, and observing the results in the browser console. By the end of the lab, students will understand how to apply comparison operators to evaluate relationships between values and comprehend their behavior in different scenarios.

Set Up HTML File for Comparison Operators

In this step, you'll set up a basic HTML file to explore JavaScript comparison operators. We'll create an HTML file with an embedded JavaScript script that will help us understand how comparison operators work.

Open the WebIDE and navigate to the ~/project directory. Create a new file called comparison-operators.html with the following content:

<!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>

Let's break down the key components of this HTML file:

The <!DOCTYPE html> declaration ensures the browser uses standard mode.
We've included a simple <script> tag where we'll write our JavaScript code.
The console.log() statement will help us verify the file is working correctly.

To view the file, you would typically open it in a web browser and check the browser's developer console. In our LabEx environment, we'll verify the file's creation and content.

Demonstrate Greater Than and Less Than Operators

In this step, you'll learn about the greater than (>) and less than (<) comparison operators in JavaScript. Open the comparison-operators.html file from the previous step and modify the <script> section to explore these operators.

Update the script with the following code:

<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>

These examples demonstrate key characteristics of greater than and less than operators:

When the left value is larger, > returns true
When the left value is smaller, > returns false
When values are equal, both > and < return false
JavaScript performs type coercion when comparing different types

Open the browser console to see the comparison results. Each console.log() will show the outcome of the comparison.

Practice Equality and Inequality Operators

In this step, you'll explore the equality (==) and inequality (!=) operators in JavaScript. Open the comparison-operators.html file and update the <script> section with the following code:

<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>

Key points about equality and inequality operators:

The == operator performs type coercion before comparison
== returns true if values are the same after type conversion
The != operator checks if values are not equal, also with type coercion
Type coercion can lead to unexpected results

Open the browser console to see the comparison results. Each console.log() will display the outcome of the comparisons.

Understand Strict Equality and Inequality Operators

In this step, you'll learn about strict equality (===) and strict inequality (!==) operators in JavaScript. Open the comparison-operators.html file and update the <script> section with the following code:

<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>

Key differences between loose and strict comparison:

=== checks both value and type without type coercion
!== is the strict inequality operator
Strict operators prevent unexpected type conversion
Always prefer === and !== for more predictable comparisons

Open the browser console to see the comparison results. Each console.log() will display the outcome of the comparisons.

Experiment with Comparison Operator Results

In this step, you'll explore more complex scenarios with comparison operators and learn how they interact with different types of values. Open the comparison-operators.html file and update the <script> section with the following code:

<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>

Key insights from these experiments:

null and undefined behave differently with loose and strict equality
NaN is never equal to itself
Object comparisons depend on reference, not content
Chained comparisons can be tricky and may not work as expected

Open the browser console to see the comparison results and understand the nuanced behavior of comparison operators.

Summary

In this lab, participants explore JavaScript comparison operators through a hands-on HTML and JavaScript exercise. The lab begins by setting up a basic HTML file with an embedded script, enabling learners to understand and practice various comparison techniques such as greater than, less than, equality, and strict equality operators.

By working through practical examples in the browser console, students gain insights into how comparison operators function, learning to evaluate different types of numeric and value comparisons. The lab provides a structured approach to understanding these fundamental JavaScript operators, allowing participants to experiment with different scenarios and observe the resulting boolean outcomes.