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.
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
Grade Calculator
Equality Comparison
Understand the difference between == (loose equality) and === (strict equality):
Loose Equality (==)
Strict Equality (===)
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
| A | B | A && B |
|---|---|---|
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
OR (||) Truth Table
| A | B | A || B |
|---|---|---|
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |
NOT (!) Truth Table
| A | !A |
|---|---|
| true | false |
| false | true |
Logical Operators Demo
Entry Fee Calculator
Membership Check
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.");
}
}