Menu

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

  1. Always use === instead of == to avoid unexpected type coercion

  2. Parentheses matter in complex expressions: (a || b) && c

  3. Switch cases need break to prevent fall-through (unless intentional)

  4. Truthy/Falsy values: Falsy values are: false, 0, "", null, undefined, NaN

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

LecturreAI Assistant

Hello! I'm LecturreAI

What would you like to learn today?