Lesson 6: JavaScript Comparison Operators

Master JavaScript comparison operators with interactive examples and real-world applications.

6.1 Comparison Operators in JavaScript

Comparison operators allow you to compare values and determine the relationship between them. These operators return a boolean value (true or false) based on the comparison result.

Important: Comparison operators are fundamental for decision-making in JavaScript programs.

Comparison Operators Table

Operator Name Description Example
== Equal to Returns true if operands are equal 5 == 5 → true
!= Not equal Returns true if operands are not equal 5 != 3 → true
=== Strict equal Returns true if operands are equal and of same type 5 === '5' → false
!== Strict not equal Returns true if operands are not equal or not same type 5 !== '5' → true
> Greater than Returns true if left operand is greater than right 10 > 5 → true
< Less than Returns true if left operand is less than right 10 < 5 → false
>= Greater than or equal Returns true if left operand is greater than or equal to right 10 >= 10 → true
<= Less than or equal Returns true if left operand is less than or equal to right 10 <= 5 → false

Using if Statements

The if keyword allows you to execute code conditionally:

if (condition) {
    // Code to execute if condition is true
}

Example 6.1: Basic if Statement

let mark = window.prompt("Enter your mark:", "0");
if (mark >= 80) {
    document.write("Grade=A");
}

If the mark entered is 80 or more, the browser displays "Grade=A", otherwise nothing happens.

6.2 Interactive Comparison Demos

Try these interactive demos to see JavaScript comparison operators in action:

Number Comparison Demo

Compare Two Numbers

Results will appear here

Grade Calculator

Grade will appear here

Equality Comparison

Understand the difference between == (loose equality) and === (strict equality):

Loose Equality (==)

Result will appear here

Strict Equality (===)

Result will appear here

6.3 Logical Operators

Logical operators allow you to combine multiple conditions:

Logical AND (&&)

Returns true if both conditions are true

if (age >= 18 && hasLicense) {
    // Can drive
}

Logical OR (||)

Returns true if at least one condition is true

if (isStudent || isSenior) {
    // Apply discount
}

Logical NOT (!)

Inverts the boolean value

if (!isRaining) {
    // Go outside
}

Truth Tables

AND (&&) Truth Table

ABA && B
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

OR (||) Truth Table

ABA || B
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

NOT (!) Truth Table

A!A
truefalse
falsetrue

Logical Operators Demo

Entry Fee Calculator

Fee will appear here

Membership Check

Result will appear here

6.4 Practical Applications

Comparison and logical operators are fundamental to many real-world applications. Here are practical examples:

Example 6.4: Form Validation

function validateForm() {
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const confirmPassword = document.getElementById("confirmPassword").value;
    
    // Validation checks
    if (name === "") {
        alert("Name is required!");
        return false;
    }
    
    if (!email.includes("@")) {
        alert("Please enter a valid email address!");
        return false;
    }
    
    if (password.length < 8) {
        alert("Password must be at least 8 characters!");
        return false;
    }
    
    if (password !== confirmPassword) {
        alert("Passwords do not match!");
        return false;
    }
    
    alert("Form submitted successfully!");
    return true;
}

Example 6.5: Access Control System

function checkAccess() {
    const age = parseInt(prompt("Enter your age:"));
    const hasMembership = confirm("Do you have a membership?");
    const isWeekend = new Date().getDay() === 0 || new Date().getDay() === 6;
    
    if (age < 18) {
        alert("Access denied. You must be at least 18 years old.");
    } else if (hasMembership) {
        alert("Welcome, member! Enjoy your visit.");
    } else if (isWeekend) {
        alert("Weekend access is for members only. Please consider joining!");
    } else {
        alert("Welcome! Regular admission applies.");
    }
}

Try the Access Control Demo:

Results will appear here