Learning JS in 30 Days - Day 4

The first three days have covered JavaScript basic syntax, variables, data types, and operators/expressions. Today will learn about conditional statements and logical control, which are core concepts for implementing branching logic in programming. Through conditional judgment, programs can execute different code paths based on different situations.

📚 Today's Learning Objectives

• Master the use of if/else conditional statements
• Understand switch statement application scenarios
• Learn to write nested conditional statements
• Understand best practices for conditional judgment

🔀 if/else Statements

Conditional statements allow programs to execute different code blocks based on different conditions.

Basic if Statement

let age = 18;

if (age >= 18) {
  console.log("You are an adult!");
}

if/else Statement

let temperature = 25;

if (temperature > 30) {
  console.log("It's very hot!");
} else {
  console.log("The weather is nice!");
}

if/else if/else Statement

let score = 85;

if (score >= 90) {
  console.log("Excellent!");
} else if (score >= 80) {
  console.log("Good!");
} else if (score >= 70) {
  console.log("Average!");
} else if (score >= 60) {
  console.log("Pass!");
} else {
  console.log("Fail!");
}

🎯 Conditional Expressions Explained

Truthy and Falsy Values

// Falsy values in JavaScript
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean(0n)); // false (BigInt)
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

// All other values are truthy
console.log(Boolean(true)); // true
console.log(Boolean(1)); // true
console.log(Boolean(-1)); // true
console.log(Boolean("hello")); // true
console.log(Boolean([])); // true (empty array)
console.log(Boolean({})); // true (empty object)
console.log(Boolean(function () {})); // true

Conditional Judgment Best Practices

// Recommended: use strict equality
let userRole = "admin";
if (userRole === "admin") {
  console.log("Admin privileges");
}

// Avoid: use loose equality
if (userRole == "admin") {
  // Not recommended
  console.log("Admin privileges");
}

// Check array length
let fruits = ["apple", "banana", "orange"];
if (fruits.length > 0) {
  console.log("There are fruits to eat!");
}

// Check object properties
let user = { name: "John", age: 25 };
if (user.name && user.age) {
  console.log(`User: ${user.name}, Age: ${user.age}`);
}

// Use optional chaining
if (user?.address?.city) {
  console.log(`User's city: ${user.address.city}`);
}

🔄 switch Statement

switch statements are used to execute different code blocks based on different values:

Basic switch Statement

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Invalid day";
}

console.log(dayName); // "Wednesday"

Multiple Cases Sharing Code

let month = 2;
let season;

switch (month) {
  case 12:
  case 1:
  case 2:
    season = "Winter";
    break;
  case 3:
  case 4:
  case 5:
    season = "Spring";
    break;
  case 6:
  case 7:
  case 8:
    season = "Summer";
    break;
  case 9:
  case 10:
  case 11:
    season = "Autumn";
    break;
  default:
    season = "Invalid month";
}

console.log(season); // "Winter"

switch vs if/else

// Use if/else for ranges
let score = 85;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else if (score >= 60) {
  grade = "D";
} else {
  grade = "F";
}

// Use switch for exact values
let status = "pending";
let statusText;

switch (status) {
  case "pending":
    statusText = "Waiting";
    break;
  case "approved":
    statusText = "Approved";
    break;
  case "rejected":
    statusText = "Rejected";
    break;
  default:
    statusText = "Unknown status";
}

🏗️ Nested Conditional Statements

Nested if Statements

let age = 25;
let hasLicense = true;
let hasInsurance = false;

if (age >= 18) {
  console.log("Age requirement met");

  if (hasLicense) {
    console.log("Has driver's license");

    if (hasInsurance) {
      console.log("Can drive!");
    } else {
      console.log("Need to buy insurance");
    }
  } else {
    console.log("Need to get driver's license");
  }
} else {
  console.log("Age requirement not met");
}

Simplifying Nested with Logical Operators

// Simplified version
if (age >= 18 && hasLicense && hasInsurance) {
  console.log("Can drive!");
} else if (age >= 18 && hasLicense) {
  console.log("Need to buy insurance");
} else if (age >= 18) {
  console.log("Need to get driver's license");
} else {
  console.log("Age requirement not met");
}

🎨 Advanced Conditional Usage

Ternary Operator

let age = 20;
let message = age >= 18 ? "Adult" : "Minor";
console.log(message); // "Adult"

// Nested ternary operators
let score = 85;
let grade =
  score >= 90
    ? "A"
    : score >= 80
    ? "B"
    : score >= 70
    ? "C"
    : score >= 60
    ? "D"
    : "F";
console.log(grade); // "B"

Short-circuit Characteristics of Logical Operators

// Use && for conditional execution
let user = { name: "John", isAdmin: true };
user.isAdmin && console.log("Admin operation");

// Use || for default values
let userName = "";
let displayName = userName || "Anonymous User";
console.log(displayName); // "Anonymous User"

// Use ?? for null/undefined
let userAge = null;
let age = userAge ?? 18;
console.log(age); // 18

Conditional Functions

function getUserStatus(user) {
  if (!user) return "User does not exist";
  if (!user.isActive) return "User is inactive";
  if (user.isBlocked) return "User is blocked";
  if (user.isPremium) return "Premium user";
  return "Regular user";
}

// Test function
let users = [
  null,
  { isActive: false },
  { isActive: true, isBlocked: true },
  { isActive: true, isBlocked: false, isPremium: true },
  { isActive: true, isBlocked: false, isPremium: false },
];

users.forEach((user, index) => {
  console.log(`User ${index + 1}: ${getUserStatus(user)}`);
});

🎯 Practice Exercises

Exercise 1: Age Classifier

function classifyAge(age) {
  if (typeof age !== "number" || age < 0) {
    return "Invalid age";
  }

  if (age < 13) {
    return "Child";
  } else if (age < 20) {
    return "Teenager";
  } else if (age < 60) {
    return "Adult";
  } else {
    return "Senior";
  }
}

// Test age classification
let ages = [5, 15, 25, 45, 65, -5, "abc"];
ages.forEach((age) => {
  console.log(`Age ${age}: ${classifyAge(age)}`);
});

Exercise 2: Enhanced Calculator

function advancedCalculator(a, b, operation) {
  // Input validation
  if (typeof a !== "number" || typeof b !== "number") {
    return "Error: Input must be numbers";
  }

  if (!isFinite(a) || !isFinite(b)) {
    return "Error: Input must be finite numbers";
  }

  // Execute operation
  switch (operation) {
    case "+":
      return a + b;
    case "-":
      return a - b;
    case "*":
      return a * b;
    case "/":
      if (b === 0) {
        return "Error: Cannot divide by zero";
      }
      return a / b;
    case "%":
      if (b === 0) {
        return "Error: Cannot divide by zero";
      }
      return a % b;
    case "**":
      return a ** b;
    default:
      return "Error: Unsupported operation";
  }
}

// Test calculator
let tests = [
  [10, 5, "+"],
  [10, 5, "-"],
  [10, 5, "*"],
  [10, 5, "/"],
  [10, 0, "/"],
  [10, 3, "%"],
  [2, 3, "**"],
  [10, "abc", "+"],
  [Infinity, 5, "+"],
];

tests.forEach(([a, b, op]) => {
  console.log(`${a} ${op} ${b} = ${advancedCalculator(a, b, op)}`);
});

Exercise 3: User Permission System

function checkPermission(user, action) {
  // Check if user exists
  if (!user) {
    return { allowed: false, reason: "User does not exist" };
  }

  // Check if user is active
  if (!user.isActive) {
    return { allowed: false, reason: "User is inactive" };
  }

  // Check if user is blocked
  if (user.isBlocked) {
    return { allowed: false, reason: "User is blocked" };
  }

  // Check permissions based on user role
  switch (user.role) {
    case "admin":
      return { allowed: true, reason: "Admin privileges" };
    case "moderator":
      if (["read", "write", "moderate"].includes(action)) {
        return { allowed: true, reason: "Moderator privileges" };
      }
      return { allowed: false, reason: "Insufficient privileges" };
    case "user":
      if (["read", "write"].includes(action)) {
        return { allowed: true, reason: "User privileges" };
      }
      return { allowed: false, reason: "Insufficient privileges" };
    case "guest":
      if (action === "read") {
        return { allowed: true, reason: "Guest privileges" };
      }
      return { allowed: false, reason: "Insufficient privileges" };
    default:
      return { allowed: false, reason: "Unknown user role" };
  }
}

// Test permission system
let users = [
  null,
  { role: "admin", isActive: true, isBlocked: false },
  { role: "moderator", isActive: true, isBlocked: false },
  { role: "user", isActive: true, isBlocked: false },
  { role: "guest", isActive: true, isBlocked: false },
  { role: "user", isActive: false, isBlocked: false },
  { role: "user", isActive: true, isBlocked: true },
];

let actions = ["read", "write", "moderate", "admin"];

users.forEach((user, index) => {
  console.log(`\nUser ${index + 1}:`, user);
  actions.forEach((action) => {
    let result = checkPermission(user, action);
    console.log(
      `  ${action}: ${result.allowed ? "✅" : "❌"} ${result.reason}`
    );
  });
});

🔍 Today's Key Points Summary

1. if/else statements: Basic conditional judgment structure
2. switch statements: Best choice for multi-branch selection
3. Truthy and falsy values: Understanding truthy/falsy concepts in JavaScript
4. Nested conditions: Methods for handling complex logic
5. Best practices: Using strict equality, logical operators, and other techniques

📚 Tomorrow's Preview

Tomorrow will learn about loop statements in detail, including:

• for loops
• while loops
• do-while loops
• loop control statements
• loop best practices

💡 Learning Tips

1. Understand truthy/falsy: Master which values are falsy in JavaScript
2. Use strict equality: Recommend using === for conditional judgment
3. Avoid deep nesting: Use logical operators to simplify conditional statements
4. Use switch appropriately: For multi-branch selection, switch is clearer than if/else

---

This concludes the introduction to day four's learning content. Tomorrow will continue learning about loop statements in detail.