HTML & JS Topic
JavaScript Operators & Conditions
1. Arithmetic Operators
Perform mathematical operations on numbers.
Basic Arithmetic:
javascript
let a = 10;
let b = 3;
// Addition
console.log(a + b); // 13
// Subtraction
console.log(a - b); // 7
// Multiplication
console.log(a * b); // 30
// Division
console.log(a / b); // 3.333...
// Remainder (Modulus)
console.log(a % b); // 1 (10 ÷ 3 = 3 remainder 1)
// Exponentiation
console.log(a ** b); // 1000 (10³)
Increment/Decrement:
javascript
let count = 5;
// Post-increment (returns then increments)
console.log(count++); // 5
console.log(count); // 6
// Pre-increment (increments then returns)
console.log(++count); // 7
// Post-decrement
console.log(count--); // 7
console.log(count); // 6
// Pre-decrement
console.log(--count); // 5
Assignment Operators:
javascript
let x = 10;
x += 5; // x = x + 5 → 15
x -= 3; // x = x - 3 → 12
x *= 2; // x = x * 2 → 24
x /= 4; // x = x / 4 → 6
x %= 4; // x = x % 4 → 2
x **= 3; // x = x ** 3 → 8
2. Comparison Operators
Compare values and return true or false.
Equality Operators:
javascript
let num = 5;
let str = "5";
// Loose equality (==) - checks value only
console.log(num == str); // true (type coercion)
// Strict equality (===) - checks value AND type
console.log(num === str); // false
// Loose inequality (!=)
console.log(num != str); // false
// Strict inequality (!==)
console.log(num !== str); // true
Relational Operators:
javascript
let a = 10;
let b = 20;
console.log(a < b); // true
console.log(a > b); // false
console.log(a <= 10); // true
console.log(a >= 11); // false
String Comparison:
javascript
// Strings are compared lexicographically (dictionary order)
console.log("apple" < "banana"); // true
console.log("cat" > "dog"); // false
console.log("10" < "2"); // true! (because '1' < '2' character-wise)
console.log("10" < 2); // false (type coercion happens)
3. Logical Operators
Combine or invert boolean values.
AND (&&) - Both must be true
javascript
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
// Practical example
let age = 25;
let hasLicense = true;
if (age >= 18 && hasLicense) {
console.log("Can drive!"); // This executes
}
OR (||) - At least one must be true
javascript
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
// Practical example
let isMember = false;
let hasCoupon = true;
if (isMember || hasCoupon) {
console.log("Discount applied!"); // This executes
}
NOT (!) - Inverts the value
javascript
console.log(!true); // false
console.log(!false); // true
// Practical example
let isLoggedOut = false;
if (!isLoggedOut) {
console.log("Welcome back!"); // This executes
}
Short-Circuit Evaluation:
javascript
// AND returns first falsy value or last truthy
console.log(0 && "Hello"); // 0 (falsy)
console.log("Hi" && "Hello"); // "Hello" (last truthy)
// OR returns first truthy value or last falsy
console.log(0 || "Default"); // "Default" (first truthy)
console.log(null || undefined || ""); // "" (last falsy)
// Nullish Coalescing (??) - returns right side only if left is null/undefined
console.log(null ?? "Default"); // "Default"
console.log(0 ?? "Default"); // 0 (0 is not null/undefined)
4. If / Else Statements
Control program flow based on conditions.
Basic If Statement:
javascript
let temperature = 25;
if (temperature > 30) {
console.log("It's hot outside!");
}
If-Else:
javascript
let score = 85;
if (score >= 60) {
console.log("You passed!");
} else {
console.log("You failed.");
}
Else-If Chain:
javascript
let grade = 87;
if (grade >= 90) {
console.log("A");
} else if (grade >= 80) {
console.log("B"); // This executes
} else if (grade >= 70) {
console.log("C");
} else if (grade >= 60) {
console.log("D");
} else {
console.log("F");
}
Nested If Statements:
javascript
let age = 20;
let hasID = true;
if (age >= 18) {
if (hasID) {
console.log("Welcome to the club!");
} else {
console.log("Need ID to enter.");
}
} else {
console.log("Too young to enter.");
}
Ternary Operator (Conditional Operator):
javascript
// Syntax: condition ? valueIfTrue : valueIfFalse
let age = 20;
let canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // "Yes"
// Multiple conditions
let grade = 85;
let result = grade >= 90 ? "A" :
grade >= 80 ? "B" :
grade >= 70 ? "C" :
grade >= 60 ? "D" : "F";
console.log(result); // "B"
5. Switch Case
Alternative to long if-else chains for multiple discrete values.
Basic Switch Statement:
javascript
let day = "Monday";
switch (day) {
case "Monday":
console.log("Start of work week");
break;
case "Tuesday":
console.log("Second day");
break;
case "Wednesday":
console.log("Midweek");
break;
case "Thursday":
console.log("Almost Friday");
break;
case "Friday":
console.log("Weekend is near!");
break;
default:
console.log("Weekend!");
}
// Output: "Start of work week"
Multiple Cases, Same Code:
javascript
let fruit = "apple";
switch (fruit) {
case "apple":
case "pear":
case "banana":
console.log("Common fruit");
break;
case "dragonfruit":
case "kiwano":
console.log("Exotic fruit");
break;
default:
console.log("Unknown fruit");
}
Switch Without Break (Fall-through):
javascript
let num = 3;
switch (num) {
case 1:
console.log("One");
case 2:
console.log("Two");
case 3:
console.log("Three"); // Executes
case 4:
console.log("Four"); // Also executes (no break!)
case 5:
console.log("Five"); // Also executes
break;
default:
console.log("Other");
}
// Output: "Three", "Four", "Five"
Switch with Expressions:
javascript
let score = 85;
switch (true) { // Compare each case expression to true
case score >= 90:
console.log("A");
break;
case score >= 80:
console.log("B"); // This executes
break;
case score >= 70:
console.log("C");
break;
default:
console.log("Below C");
}
Complete Examples
Example 1: Login System
javascript
let username = "admin";
let password = "12345";
let attempts = 2;
if (username === "admin" && password === "12345") {
console.log("Login successful! Redirecting...");
} else if (attempts > 0) {
attempts--;
console.log(`Invalid credentials. ${attempts} attempts remaining.`);
} else {
console.log("Account locked. Contact support.");
}
Example 2: Shopping Cart Logic
javascript
let cartTotal = 150;
let memberStatus = "gold";
let discount = 0;
// Calculate discount based on member status
switch (memberStatus) {
case "gold":
discount = 20;
break;
case "silver":
discount = 10;
break;
case "bronze":
discount = 5;
break;
default:
discount = 0;
}
// Apply discount if cart meets minimum
if (cartTotal > 100 && discount > 0) {
let finalTotal = cartTotal - (cartTotal * discount / 100);
console.log(`Final total: $${finalTotal} (${discount}% discount applied)`);
} else {
console.log(`Final total: $${cartTotal}`);
}
Example 3: Number Classifier
javascript
function classifyNumber(num) {
let result = "";
// Check if positive, negative, or zero
if (num > 0) {
result += "Positive";
} else if (num < 0) {
result += "Negative";
} else {
return "Zero";
}
// Check if even or odd
result += num % 2 === 0 ? " Even" : " Odd";
// Check if divisible by 5
result += num % 5 === 0 ? " and divisible by 5" : "";
return result;
}
console.log(classifyNumber(10)); // "Positive Even and divisible by 5"
console.log(classifyNumber(-7)); // "Negative Odd"
console.log(classifyNumber(0)); // "Zero"
Quick Reference Table
| Operator Type | Operators | Example |
|---|---|---|
| Arithmetic | + - * / % ** ++ -- |
x + y |
| Assignment | = += -= *= /= %= **= |
x += 5 |
| Comparison | == === != !== > < >= <= |
a === b |
| Logical | && || ! ?? |
a && b |
| Ternary | ? : |
x > 0 ? 'pos' : 'neg' |
Key Points to Remember
-
Always use
===instead of==to avoid unexpected type coercion -
Parentheses matter in complex expressions:
(a || b) && c -
Switch cases need
breakto prevent fall-through (unless intentional) -
Truthy/Falsy values: Falsy values are:
false, 0, "", null, undefined, NaN -
Short-circuit evaluation can be used for default values:
const name = input || "Anonymous"
These operators and control structures form the foundation of logic and decision-making in JavaScript programs.
Comments (0)
No comments yet. Be the first to comment!