Comparison and Logical Operators

Introduction to Comparison and Logical Operators

Comparison and logical operators are essential for decision-making in JavaScript programs. They allow you to:

• Compare values for equality or inequality
• Determine relationships between values (greater than, less than, etc.)
• Combine multiple conditions using logical operators (AND, OR, NOT)
• Create complex decision structures for program flow control

These operators form the backbone of conditional logic, enabling programs to make decisions based on data and user input.

Comparison Operators

Comparison operators compare their operands and return a Boolean value (true or false) based on whether the comparison is true.

Equality Operators

// Equality (loose) checks for value equality with type conversion
console.log(5 == 5);      // true
console.log(5 == "5");    // true (string "5" is converted to number 5)
console.log(0 == false);  // true (false is converted to 0)
console.log(0 == "");     // true (empty string is converted to 0)
console.log(null == undefined); // true (special case)

// Strict equality checks both value and type
console.log(5 === 5);      // true
console.log(5 === "5");    // false (different types)
console.log(0 === false);  // false (different types)
console.log(0 === "");     // false (different types)
console.log(null === undefined); // false (different types)

// Inequality (loose) with type conversion
console.log(5 != 6);       // true
console.log(5 != "5");     // false (they are equal after conversion)
console.log(0 != false);   // false (they are equal after conversion)

// Strict inequality (no type conversion)
console.log(5 !== 6);      // true
console.log(5 !== "5");    // true (different types)
console.log(0 !== false);  // true (different types)

Relational Operators

// Greater than
console.log(10 > 5);       // true
console.log(10 > "5");     // true (string "5" converted to number)
console.log("b" > "a");    // true (lexicographical comparison)

// Less than
console.log(5 < 10);       // true
console.log("5" < 10);     // true (string "5" converted to number)
console.log("a" < "b");    // true (lexicographical comparison)

// Greater than or equal to
console.log(10 >= 10);     // true
console.log(10 >= 5);      // true
console.log("10" >= 10);   // true (string "10" converted to number)

// Less than or equal to
console.log(5 <= 10);      // true
console.log(5 <= 5);       // true
console.log("5" <= 5);     // true (string "5" converted to number)

// Age verification function for a website
function verifyAge(age, minimumAge = 18, region = "default") {
  // Ensure age is a number
  const userAge = Number(age);
  
  // Check if conversion resulted in a valid number
  if (isNaN(userAge)) {
    return {
      allowed: false,
      reason: "Invalid age input"
    };
  }
  
  // Check if age is realistic
  if (userAge < 0 || userAge > 120) {
    return {
      allowed: false,
      reason: "Age out of valid range"
    };
  }
  
  // Adjust minimum age based on region
  let requiredAge = minimumAge;
  if (region === "US") {
    requiredAge = 21; // US alcohol purchase age
  } else if (region === "JP") {
    requiredAge = 20; // Japan's age of majority
  }
  
  // Check if user meets the age requirement
  if (userAge >= requiredAge) {
    return {
      allowed: true,
      reason: "Age requirement met"
    };
  } else {
    return {
      allowed: false,
      reason: `Must be at least ${requiredAge} years old`
    };
  }
}

// Test cases
console.log(verifyAge(25));        // { allowed: true, reason: "Age requirement met" }
console.log(verifyAge(17));        // { allowed: false, reason: "Must be at least 18 years old" }
console.log(verifyAge("hello"));   // { allowed: false, reason: "Invalid age input" }
console.log(verifyAge(19, 18, "US")); // { allowed: false, reason: "Must be at least 21 years old" }

String Comparison

JavaScript compares strings character by character, using lexicographical (dictionary) ordering.

Character Comparison Rules

• Characters are compared using their Unicode values
• Uppercase letters come before lowercase letters ('A' < 'a')
• Numbers come before letters ('1' < 'A')
• Comparison proceeds character by character until a difference is found

// Basic string comparison
console.log("apple" < "banana");           // true
console.log("apple" < "Apple");            // false (uppercase comes before lowercase)
console.log("10" < "2");                   // true ("1" comes before "2" lexicographically)
console.log("10" < 2);                     // false (converted to numbers: 10 > 2)

// Comparing strings of different lengths
console.log("abc" < "abcd");               // true (shorter string comes first if it's a prefix)
console.log("abcd" < "abce");              // true (first different character: 'd' < 'e')

// Case-insensitive comparison
function equalsIgnoreCase(str1, str2) {
  return str1.toLowerCase() === str2.toLowerCase();
}

console.log(equalsIgnoreCase("Hello", "hello")); // true

Locale-Specific Comparison

For internationalized applications, use localeCompare() to compare strings according to language-specific rules:

// Locale-aware string comparison
console.log("a".localeCompare("b"));       // -1 (less than)
console.log("b".localeCompare("a"));       // 1 (greater than)
console.log("a".localeCompare("a"));       // 0 (equal)

// Different languages have different sort orders
console.log("ä".localeCompare("z", "en"));     // -1 in English
console.log("ä".localeCompare("z", "sv"));     // 1 in Swedish (where ä comes after z)

// Sort an array of strings with locale awareness
const names = ["Zürich", "Äpfel", "Andres", "Xavier"];
names.sort((a, b) => a.localeCompare(b, "de")); // Sort as in German
console.log(names); // Correct German ordering

// Search function with case-insensitive partial matching
function searchProducts(products, query) {
  if (!query || query.trim() === "") {
    return products; // Return all products if no query
  }
  
  // Convert query to lowercase for case-insensitive search
  const searchTerm = query.toLowerCase().trim();
  
  // Filter products that match the search term
  return products.filter(product => {
    const name = product.name.toLowerCase();
    const description = product.description.toLowerCase();
    
    // Check if product name or description contains the search term
    return name.includes(searchTerm) || description.includes(searchTerm);
  });
}

// Sort array with custom comparison
function sortProductsBy(products, sortField, direction = "asc") {
  // Create a copy to avoid mutating the original array
  const result = [...products];
  
  // Define sort comparator function
  result.sort((a, b) => {
    let comparison = 0;
    
    if (sortField === "name") {
      // Use locale-aware comparison for names
      comparison = a.name.localeCompare(b.name, "en", { sensitivity: "base" });
    } else if (sortField === "price") {
      // Numeric comparison for prices
      comparison = a.price - b.price;
    } else if (sortField === "date") {
      // Date comparison
      comparison = new Date(a.date) - new Date(b.date);
    }
    
    // Reverse if descending order is requested
    return direction === "desc" ? -comparison : comparison;
  });
  
  return result;
}

// Sample product data
const products = [
  { name: "Laptop", price: 999.99, date: "2023-01-15", description: "Powerful laptop with SSD" },
  { name: "Headphones", price: 59.99, date: "2023-02-20", description: "Wireless noise-cancelling" },
  { name: "Mouse", price: 24.99, date: "2023-01-05", description: "Ergonomic wireless mouse" }
];

// Search for products containing "wireless"
const wirelessProducts = searchProducts(products, "wireless");
console.log(wirelessProducts);

// Sort products by price (high to low)
const expensiveFirst = sortProductsBy(products, "price", "desc");
console.log(expensiveFirst);

Object and Array Comparison

Comparing objects and arrays in JavaScript is more complex than comparing primitive values because they are reference types.

Reference Comparison

// Objects and arrays are compared by reference, not content
const obj1 = { name: "Alice" };
const obj2 = { name: "Alice" };
const obj3 = obj1; // Reference to the same object

console.log(obj1 == obj2);  // false (different objects)
console.log(obj1 === obj2); // false (different objects)
console.log(obj1 == obj3);  // true (same object reference)
console.log(obj1 === obj3); // true (same object reference)

// Same with arrays
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
const arr3 = arr1;

console.log(arr1 == arr2);  // false (different arrays)
console.log(arr1 === arr2); // false (different arrays)
console.log(arr1 == arr3);  // true (same array reference)
console.log(arr1 === arr3); // true (same array reference)

Content-Based Comparison

// Simple function to compare objects by content
function areObjectsEqual(obj1, obj2) {
  // Check for null or undefined
  if (obj1 === null || obj2 === null || 
      obj1 === undefined || obj2 === undefined) {
    return obj1 === obj2;
  }
  
  // Check if types are different
  if (typeof obj1 !== typeof obj2) {
    return false;
  }
  
  // Handle non-objects
  if (typeof obj1 !== 'object') {
    return obj1 === obj2;
  }
  
  // Handle arrays
  if (Array.isArray(obj1) && Array.isArray(obj2)) {
    if (obj1.length !== obj2.length) {
      return false;
    }
    
    for (let i = 0; i < obj1.length; i++) {
      if (!areObjectsEqual(obj1[i], obj2[i])) {
        return false;
      }
    }
    
    return true;
  }
  
  // Handle dates
  if (obj1 instanceof Date && obj2 instanceof Date) {
    return obj1.getTime() === obj2.getTime();
  }
  
  // Get keys
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  
  // Check if number of keys is different
  if (keys1.length !== keys2.length) {
    return false;
  }
  
  // Check if all keys from obj1 exist in obj2 with the same value
  for (const key of keys1) {
    if (!keys2.includes(key) || !areObjectsEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  
  return true;
}

// Test cases
console.log(areObjectsEqual({ name: "Alice" }, { name: "Alice" })); // true
console.log(areObjectsEqual({ name: "Alice" }, { name: "Bob" })); // false
console.log(areObjectsEqual([1, 2, 3], [1, 2, 3])); // true
console.log(areObjectsEqual([1, 2, 3], [1, 2, 4])); // false

// Nested objects
const nested1 = { a: 1, b: { c: 2 } };
const nested2 = { a: 1, b: { c: 2 } };
const nested3 = { a: 1, b: { c: 3 } };

console.log(areObjectsEqual(nested1, nested2)); // true
console.log(areObjectsEqual(nested1, nested3)); // false

Modern Solutions

// In modern web development, you can use libraries like:
// 1. Lodash's isEqual method
// import _ from 'lodash';
// console.log(_.isEqual(obj1, obj2));

// 2. JSON.stringify for simple cases (has limitations)
function simpleCompare(obj1, obj2) {
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}

// This works for simple objects but has limitations:
// - Doesn't work with circular references
// - Doesn't correctly handle certain values (undefined, functions, etc.)
// - Order of properties matters
console.log(simpleCompare({ a: 1, b: 2 }, { b: 2, a: 1 })); // false
console.log(simpleCompare([1, 2, 3], [1, 2, 3])); // true

// Form data change detection
class UserForm {
  constructor(initialData) {
    this.initialData = JSON.parse(JSON.stringify(initialData)); // Deep copy
    this.currentData = JSON.parse(JSON.stringify(initialData)); // Deep copy
    this.isDirty = false;
  }
  
  // Update a field
  updateField(fieldName, value) {
    this.currentData[fieldName] = value;
    this.checkDirtyState();
  }
  
  // Check if form has changed
  checkDirtyState() {
    // Simple comparison for this example
    const stringInitial = JSON.stringify(this.initialData);
    const stringCurrent = JSON.stringify(this.currentData);
    
    this.isDirty = stringInitial !== stringCurrent;
    
    return this.isDirty;
  }
  
  // Get changed fields only
  getChangedFields() {
    const changes = {};
    
    // Compare each field
    for (const key in this.currentData) {
      if (JSON.stringify(this.initialData[key]) !== JSON.stringify(this.currentData[key])) {
        changes[key] = this.currentData[key];
      }
    }
    
    return changes;
  }
  
  // Reset form to initial state
  reset() {
    this.currentData = JSON.parse(JSON.stringify(this.initialData));
    this.isDirty = false;
  }
  
  // Submit form if changed
  submitChanges() {
    if (!this.isDirty) {
      console.log("No changes to submit");
      return false;
    }
    
    const changes = this.getChangedFields();
    console.log("Submitting changes:", changes);
    
    // In a real app, you would send these changes to a server
    // api.updateUser(this.initialData.id, changes).then(...)
    
    // Update initial data to reflect saved state
    this.initialData = JSON.parse(JSON.stringify(this.currentData));
    this.isDirty = false;
    
    return true;
  }
}

// Usage example
const userData = {
  id: 123,
  name: "John Doe",
  email: "john@example.com",
  preferences: {
    theme: "light",
    notifications: true
  }
};

const userForm = new UserForm(userData);
console.log("Is form dirty?", userForm.isDirty); // false

userForm.updateField("name", "Jane Doe");
console.log("Is form dirty?", userForm.isDirty); // true
console.log("Changed fields:", userForm.getChangedFields()); // { name: "Jane Doe" }

userForm.updateField("preferences", { theme: "dark", notifications: true });
console.log("Changed fields:", userForm.getChangedFields());
// { name: "Jane Doe", preferences: { theme: "dark", notifications: true } }

userForm.submitChanges(); // Submits changes
console.log("Is form dirty after submit?", userForm.isDirty); // false

Logical Operators

Logical operators combine multiple conditions and manipulate Boolean values.

Basic Logical Operators

Truth Tables

// Logical AND (&&)
console.log(true && true);    // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);  // false

// Logical OR (||)
console.log(true || true);    // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);  // false

// Logical NOT (!)
console.log(!true);           // false
console.log(!false);          // true
console.log(!!true);          // true (double negation)
console.log(!!false);         // false (double negation)

// Nullish coalescing (??)
console.log(null ?? "default");       // "default"
console.log(undefined ?? "default");  // "default"
console.log(0 ?? "default");          // 0 (0 is not nullish)
console.log("" ?? "default");         // "" (empty string is not nullish)
console.log(false ?? "default");      // false (false is not nullish)

Short-Circuit Evaluation

Logical operators evaluate expressions from left to right and exhibit short-circuit behavior:

• && stops at the first false value
• || stops at the first true value

// Short-circuit with &&
console.log(false && functionThatWontRun()); // false (function is never called)

// Short-circuit with ||
console.log(true || functionThatWontRun());  // true (function is never called)

// This is useful for checking for null before accessing properties
const user = null;
console.log(user && user.name); // null (doesn't crash with TypeError)

// Or providing default values
const username = user || { name: "Guest" };  // { name: "Guest" }

// Examples with non-Boolean values (evaluates their "truthiness")
console.log("Hello" && "World");   // "World" (last value if all are truthy)
console.log("" && "World");        // "" (first falsy value)
console.log("Hello" || "World");   // "Hello" (first truthy value)
console.log("" || "World");        // "World" (first truthy value)

Combining Logical Operators

// Combining operators
console.log(true && true || false);   // true
console.log(true && (true || false)); // true
console.log((true && true) || false); // true
console.log(true && false || true);   // true
console.log(true && (false || true)); // true
console.log((true && false) || true); // true

// Complex condition
const age = 25;
const hasID = true;
const isMember = false;

// Can enter if 18+ AND has ID, OR is a member
const canEnter = (age >= 18 && hasID) || isMember;
console.log(canEnter); // true

// User permission system
function canPerformAction(user, action, resource) {
  // Guest users can only view public resources
  if (!user || user.role === "guest") {
    return action === "view" && resource.isPublic;
  }
  
  // Super admins can do anything
  if (user.role === "admin" && user.isSuperAdmin) {
    return true;
  }
  
  // Check action-specific permissions
  switch (action) {
    case "view":
      // Anyone can view public resources
      // Users can view their own resources or resources shared with them
      return resource.isPublic || 
             resource.ownerId === user.id || 
             (resource.sharedWith && resource.sharedWith.includes(user.id));
    
    case "edit":
      // Owners can edit their resources
      // Admins can edit any resource except private resources from other admins
      return resource.ownerId === user.id || 
             (user.role === "admin" && 
              !(resource.isPrivate && 
                resource.ownerRole === "admin"));
    
    case "delete":
      // Only owners and admins can delete resources
      // Admins can't delete other admins' resources
      return resource.ownerId === user.id || 
             (user.role === "admin" && resource.ownerRole !== "admin");
    
    default:
      return false;
  }
}

// Test cases
const publicResource = {
  id: 1,
  isPublic: true,
  ownerId: 101,
  ownerRole: "user"
};

const privateResource = {
  id: 2,
  isPublic: false,
  isPrivate: true,
  ownerId: 102,
  ownerRole: "admin",
  sharedWith: [103, 104]
};

const users = {
  guest: { role: "guest" },
  regular: { id: 103, role: "user" },
  owner: { id: 101, role: "user" },
  admin: { id: 105, role: "admin" },
  superAdmin: { id: 106, role: "admin", isSuperAdmin: true }
};

// Check permissions
console.log("Guest view public:", canPerformAction(users.guest, "view", publicResource)); // true
console.log("Guest view private:", canPerformAction(users.guest, "view", privateResource)); // false
console.log("User view shared:", canPerformAction(users.regular, "view", privateResource)); // true
console.log("User edit shared:", canPerformAction(users.regular, "edit", privateResource)); // false
console.log("Owner delete:", canPerformAction(users.owner, "delete", publicResource)); // true
console.log("Admin delete admin resource:", canPerformAction(users.admin, "delete", privateResource)); // false
console.log("SuperAdmin delete admin resource:", canPerformAction(users.superAdmin, "delete", privateResource)); // true

The Nullish Coalescing Operator (??)

The nullish coalescing operator (??) provides a more precise alternative to || for default values.

Nullish vs Logical OR

The key difference is that ?? only returns the right-hand side when the left-hand side is null or undefined, while || returns the right-hand side for any falsy value.

// Comparison between nullish coalescing and logical OR
const falsy = {
  null: null ?? "default",        // "default"
  undefined: undefined ?? "default", // "default"
  emptyString: "" ?? "default",   // "" (empty string is not nullish)
  zero: 0 ?? "default",           // 0 (zero is not nullish)
  false: false ?? "default",      // false (false is not nullish)
  NaN: NaN ?? "default"           // NaN (NaN is not nullish)
};

const falsyOr = {
  null: null || "default",        // "default"
  undefined: undefined || "default", // "default"
  emptyString: "" || "default",   // "default" (empty string is falsy)
  zero: 0 || "default",           // "default" (zero is falsy)
  false: false || "default",      // "default" (false is falsy)
  NaN: NaN || "default"           // "default" (NaN is falsy)
};

console.log("Nullish coalescing:", falsy);
console.log("Logical OR:", falsyOr);

Real-World Uses

// Using nullish coalescing for default function parameters
function createUser(username, options) {
  // Use nullish coalescing for options
  options = options ?? {};
  
  // Use nullish coalescing for nested properties
  const settings = {
    role: options.role ?? "user",
    isActive: options.isActive ?? true,
    preferences: options.preferences ?? {},
    theme: options.preferences?.theme ?? "light",
    notifications: options.preferences?.notifications ?? true
  };
  
  return {
    username,
    ...settings,
    createdAt: new Date()
  };
}

// Test with various configurations
const user1 = createUser("alice"); // All defaults
const user2 = createUser("bob", { role: "admin" }); // Some defaults
const user3 = createUser("charlie", { 
  isActive: false, 
  preferences: { notifications: false }
}); // Mixed values

console.log(user1, user2, user3);

// Important use case: allowing 0, false, "" as valid values
function updateCounter(element, count) {
  // Using || would convert 0 to default
  // element.textContent = count || "No items";
  
  // Using ?? preserves 0 as a valid value
  element.textContent = count ?? "No items";
}

Optional Chaining with Nullish Coalescing

// Combining optional chaining (?.) with nullish coalescing (??)
const user = {
  name: "Alice",
  address: {
    city: "New York"
    // country is missing
  }
};

// Old way of safe property access with defaults
let country;
if (user && user.address && user.address.country) {
  country = user.address.country;
} else {
  country = "Unknown";
}

// Modern way combining optional chaining and nullish coalescing
const country2 = user?.address?.country ?? "Unknown";
console.log(country2); // "Unknown"

// This is particularly useful for deeply nested structures
const settings = {
  display: {
    theme: {
      dark: {
        background: "#000",
        text: "#fff"
      }
    }
  }
};

// Safely access deeply nested properties with defaults
const textColor = settings?.display?.theme?.light?.text ?? "#000";
console.log(textColor); // "#000" (default value)

// Configuration system with multiple layers of defaults
class ConfigurationManager {
  constructor(options = {}) {
    // Default configuration
    this.defaults = {
      app: {
        name: "MyApp",
        version: "1.0.0"
      },
      server: {
        port: 3000,
        host: "localhost",
        timeout: 30000
      },
      database: {
        host: "localhost",
        port: 27017,
        name: "myapp",
        credentials: null
      },
      features: {
        darkMode: true,
        analytics: true,
        cache: {
          enabled: true,
          duration: 3600
        }
      },
      logging: {
        level: "info",
        format: "json"
      }
    };
    
    // Environment overrides
    this.envConfig = this.loadEnvironmentConfig();
    
    // User config (passed directly)
    this.userConfig = options;
    
    // Build effective configuration
    this.buildEffectiveConfig();
  }
  
  // Load configuration from environment variables
  loadEnvironmentConfig() {
    // In a real app, this would read process.env or similar
    // Simulated example
    return {
      server: {
        port: 8080
      },
      database: {
        host: "db.example.com"
      }
    };
  }
  
  // Get merged configuration
  buildEffectiveConfig() {
    this.config = this.mergeConfigs(this.defaults, this.envConfig, this.userConfig);
  }
  
  // Deep merge configs using nullish coalescing
  mergeConfigs(...configs) {
    const result = {};
    
    // For each config object
    for (const config of configs) {
      // For each top-level key
      for (const key in config) {
        if (config[key] === null || config[key] === undefined) {
          continue; // Skip null/undefined values
        }
        
        // If this is an object and the result already has this key as an object
        if (typeof config[key] === 'object' && 
            !Array.isArray(config[key]) && 
            config[key] !== null &&
            typeof result[key] === 'object' && 
            !Array.isArray(result[key]) && 
            result[key] !== null) {
          // Recursively merge this object
          result[key] = this.mergeConfigs(result[key], config[key]);
        } else {
          // Otherwise, just use the value
          result[key] = config[key];
        }
      }
    }
    
    return result;
  }
  
  // Get a configuration value with a default
  get(path, defaultValue = undefined) {
    const parts = path.split('.');
    let current = this.config;
    
    for (const part of parts) {
      if (current === null || current === undefined) {
        return defaultValue;
      }
      
      current = current[part];
    }
    
    return current ?? defaultValue;
  }
}

// Usage example
const config = new ConfigurationManager({
  app: {
    name: "MyCustomApp"
  },
  server: {
    // Override port, keep other server settings
    port: 9000
  },
  features: {
    darkMode: false,
    // Keep other feature defaults
    cache: {
      // Override just the duration
      duration: 7200
    }
  }
});

console.log(config.get('app.name')); // "MyCustomApp"
console.log(config.get('server.port')); // 9000
console.log(config.get('server.host')); // "localhost" (from defaults)
console.log(config.get('database.host')); // "db.example.com" (from environment)
console.log(config.get('features.cache.duration')); // 7200
console.log(config.get('features.cache.enabled')); // true (from defaults)
console.log(config.get('nonexistent.path', 'Not found')); // "Not found"

The Conditional (Ternary) Operator

The conditional operator (condition ? expr1 : expr2) is the only JavaScript operator that takes three operands and provides a way to write shorter conditionals.

Basic Usage

// Standard if/else statement
let result;
if (age >= 18) {
  result = "Adult";
} else {
  result = "Minor";
}

// Equivalent ternary expression
const result = age >= 18 ? "Adult" : "Minor";

// Ternary with multiple conditions
const ageGroup = age < 13 ? "Child" : 
                 age < 18 ? "Teenager" : 
                 age < 65 ? "Adult" : 
                 "Senior";

// Conditional execution with side effects
isLoggedIn ? updateUserLastSeen() : redirectToLogin();

Returning Values from Functions

// Using ternary operator for cleaner return statements
function getGreeting(hour) {
  return hour < 12 ? "Good morning" :
         hour < 18 ? "Good afternoon" :
         "Good evening";
}

console.log(getGreeting(9));  // "Good morning"
console.log(getGreeting(14)); // "Good afternoon"
console.log(getGreeting(20)); // "Good evening"

Inline Conditional Rendering

// Commonly used in UI rendering
function renderUserStatus(user) {
  return `
    

      
        ${user.isOnline ? 'Online' : 'Offline'}
      
      ${user.isAdmin ? 'Admin' : ''}
    
  `;
}

// A button component with conditional styling
function Button({ type, size, disabled, children }) {
  // Determine button class based on type
  const typeClass = type === 'primary' ? 'btn-primary' :
                   type === 'danger' ? 'btn-danger' :
                   type === 'success' ? 'btn-success' :
                   'btn-default';
  
  // Determine size class
  const sizeClass = size === 'large' ? 'btn-lg' :
                   size === 'small' ? 'btn-sm' :
                   'btn-md';
  
  // Build the full class list
  const className = `btn ${typeClass} ${sizeClass} ${disabled ? 'btn-disabled' : ''}`;
  
  // Render the button
  return `
    
      ${children}
    
  `;
}

// Usage
console.log(Button({ 
  type: 'primary', 
  size: 'large', 
  disabled: false,
  children: 'Submit Form'
}));

// Ternary in a data formatter utility
function formatValue(value, type) {
  return type === 'currency' ? `$${value.toFixed(2)}` :
         type === 'percentage' ? `${value.toFixed(1)}%` :
         type === 'date' ? new Date(value).toLocaleDateString() :
         String(value);
}

console.log(formatValue(123.456, 'currency')); // "$123.46"
console.log(formatValue(0.125, 'percentage')); // "12.5%"
console.log(formatValue(new Date(2023, 5, 15), 'date')); // "6/15/2023" (format depends on locale)

Practical Exercise

Let's put our knowledge of comparison and logical operators to practical use with some exercises.

Exercise 1: Password Validator

Create a comprehensive password validator:

// Password validator function
function validatePassword(password) {
  // Initialize results
  const result = {
    valid: false,
    errors: [],
    strength: "weak"
  };
  
  // Check if password exists
  if (!password) {
    result.errors.push("Password is required");
    return result;
  }
  
  // Check minimum length
  if (password.length < 8) {
    result.errors.push("Password must be at least 8 characters long");
  }
  
  // Check for uppercase letter
  if (!/[A-Z]/.test(password)) {
    result.errors.push("Password must contain at least one uppercase letter");
  }
  
  // Check for lowercase letter
  if (!/[a-z]/.test(password)) {
    result.errors.push("Password must contain at least one lowercase letter");
  }
  
  // Check for number
  if (!/\d/.test(password)) {
    result.errors.push("Password must contain at least one number");
  }
  
  // Check for special character
  if (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)) {
    result.errors.push("Password must contain at least one special character");
  }
  
  // Set validity flag
  result.valid = result.errors.length === 0;
  
  // Determine password strength
  if (result.valid) {
    const hasExtraLength = password.length >= 12;
    const hasExtraNumbers = (password.match(/\d/g) || []).length >= 3;
    const hasExtraSpecial = (password.match(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/g) || []).length >= 2;
    
    // Count strength factors
    const strengthFactors = [hasExtraLength, hasExtraNumbers, hasExtraSpecial].filter(Boolean).length;
    
    result.strength = strengthFactors === 0 ? "medium" :
                      strengthFactors === 1 ? "strong" :
                      "very strong";
  }
  
  return result;
}

// Test cases
console.log(validatePassword(""));
console.log(validatePassword("password"));
console.log(validatePassword("Password1"));
console.log(validatePassword("Password1!"));
console.log(validatePassword("P@ssw0rd123!"));

Exercise 2: Product Filter

Create a flexible product filtering system using various comparison and logical operators:

// Product filtering system
function filterProducts(products, filters) {
  // Default to all products if no filters provided
  if (!filters || Object.keys(filters).length === 0) {
    return products;
  }
  
  // Apply filters
  return products.filter(product => {
    // Price range filter
    const matchesMinPrice = filters.minPrice === undefined || product.price >= filters.minPrice;
    const matchesMaxPrice = filters.maxPrice === undefined || product.price <= filters.maxPrice;
    
    // Category filter
    const matchesCategory = filters.category === undefined || 
                          (filters.category === "all") ||
                          product.category === filters.category;
    
    // Rating filter
    const matchesRating = filters.minRating === undefined || product.rating >= filters.minRating;
    
    // Stock status filter
    const matchesStock = filters.inStock === undefined || 
                        (filters.inStock === true ? product.stock > 0 : true);
    
    // Search query filter
    const matchesSearch = !filters.search || 
                         product.name.toLowerCase().includes(filters.search.toLowerCase()) || 
                         product.description.toLowerCase().includes(filters.search.toLowerCase());
    
    // Combine all filter conditions with logical AND
    return matchesMinPrice && 
           matchesMaxPrice && 
           matchesCategory && 
           matchesRating && 
           matchesStock && 
           matchesSearch;
  });
}

// Sample products
const products = [
  { id: 1, name: "Laptop", category: "electronics", price: 999.99, stock: 15, rating: 4.5,
    description: "Powerful laptop with SSD storage" },
  { id: 2, name: "Smartphone", category: "electronics", price: 699.99, stock: 25, rating: 4.2,
    description: "Latest model with high-resolution camera" },
  { id: 3, name: "Coffee Maker", category: "kitchen", price: 79.99, stock: 10, rating: 3.8,
    description: "Drip coffee machine with timer" },
  { id: 4, name: "Running Shoes", category: "clothing", price: 89.99, stock: 0, rating: 4.0,
    description: "Lightweight running shoes for athletes" },
  { id: 5, name: "Bluetooth Speaker", category: "electronics", price: 49.99, stock: 30, rating: 3.5,
    description: "Portable wireless speaker with bass boost" }
];

// Test filtering
console.log("Electronics under $700:", 
  filterProducts(products, { category: "electronics", maxPrice: 700 }));

console.log("In-stock items with rating ≥ 4:", 
  filterProducts(products, { inStock: true, minRating: 4 }));

console.log("Items containing 'portable' or 'wireless':", 
  filterProducts(products, { search: "portable wireless" }));

Exercise 3: Advanced Role-Based Permission System

Build a sophisticated permission system using logical operators and comparison:

// Advanced role-based permission system
class PermissionSystem {
  constructor() {
    // Define role hierarchy (higher number = more access)
    this.roleHierarchy = {
      "guest": 0,
      "user": 10,
      "moderator": 20,
      "admin": 30,
      "superadmin": 40
    };
    
    // Define resource types
    this.resourceTypes = ["article", "comment", "user", "setting"];
    
    // Define action types
    this.actionTypes = ["view", "create", "edit", "delete", "publish", "unpublish", "ban"];
    
    // Permission rules
    this.setupPermissionRules();
  }
  
  // Set up the permission rules
  setupPermissionRules() {
    // Default rules:
    this.rules = [
      // Format: { role, resource, action, condition }
      
      // Guest permissions
      { role: "guest", resource: "article", action: "view", condition: (user, resource) => 
        resource?.status === "published" },
      { role: "guest", resource: "comment", action: "view", condition: (user, resource) => 
        resource?.articleStatus === "published" },
      
      // User permissions
      { role: "user", resource: "article", action: "view" },
      { role: "user", resource: "article", action: "create" },
      { role: "user", resource: "article", action: "edit", condition: (user, resource) => 
        user?.id === resource?.authorId },
      { role: "user", resource: "article", action: "delete", condition: (user, resource) => 
        user?.id === resource?.authorId && resource?.status !== "published" },
      { role: "user", resource: "comment", action: "view" },
      { role: "user", resource: "comment", action: "create" },
      { role: "user", resource: "comment", action: "edit", condition: (user, resource) => 
        user?.id === resource?.authorId && new Date() - new Date(resource?.createdAt) < 15*60*1000 }, // 15 min
      { role: "user", resource: "comment", action: "delete", condition: (user, resource) => 
        user?.id === resource?.authorId },
      { role: "user", resource: "user", action: "view" },
      { role: "user", resource: "user", action: "edit", condition: (user, resource) => 
        user?.id === resource?.id },
      
      // Moderator permissions
      { role: "moderator", resource: "article", action: "view" },
      { role: "moderator", resource: "article", action: "edit", condition: (user, resource) => 
        user?.id === resource?.authorId || resource?.status !== "published" },
      { role: "moderator", resource: "article", action: "publish", condition: (user, resource) => 
        resource?.status !== "published" },
      { role: "moderator", resource: "article", action: "unpublish" },
      { role: "moderator", resource: "comment", action: "delete" },
      { role: "moderator", resource: "user", action: "ban", condition: (user, resource) => 
        this.getRoleLevel(resource?.role) < this.getRoleLevel(user?.role) },
      
      // Admin permissions
      { role: "admin", resource: "article", action: "delete" },
      { role: "admin", resource: "user", action: "edit", condition: (user, resource) => 
        this.getRoleLevel(resource?.role) < this.getRoleLevel(user?.role) },
      { role: "admin", resource: "setting", action: "view" },
      { role: "admin", resource: "setting", action: "edit", condition: (user, resource) => 
        !resource?.isCritical },
      
      // Superadmin permissions
      { role: "superadmin", resource: "setting", action: "edit" }
    ];
  }
  
  // Get numeric level for a role
  getRoleLevel(role) {
    return this.roleHierarchy[role] ?? -1;
  }
  
  // Check if a user can perform an action on a resource
  can(user, action, resource) {
    // No user means guest access only
    const userRole = user?.role || "guest";
    const userRoleLevel = this.getRoleLevel(userRole);
    
    if (userRoleLevel === -1) {
      console.log(`Invalid role: ${userRole}`);
      return false;
    }
    
    // Check if the action exists
    if (!this.actionTypes.includes(action)) {
      console.log(`Invalid action: ${action}`);
      return false;
    }
    
    // Check if the resource type exists
    const resourceType = resource?.type;
    if (!this.resourceTypes.includes(resourceType)) {
      console.log(`Invalid resource type: ${resourceType}`);
      return false;
    }
    
    // Find applicable rules
    let hasPermission = false;
    
    // Check rules for the user's role and above (inherited permissions)
    for (const roleName in this.roleHierarchy) {
      // Only check this role if it's lower or equal to the user's role
      if (this.getRoleLevel(roleName) <= userRoleLevel) {
        // Find rules that match this role, the resource type, and the action
        const matchingRules = this.rules.filter(rule => 
          rule.role === roleName && 
          rule.resource === resourceType && 
          rule.action === action
        );
        
        // Check each matching rule
        for (const rule of matchingRules) {
          if (!rule.condition || rule.condition(user, resource)) {
            hasPermission = true;
            break;
          }
        }
      }
      
      // If we found a permission, we can stop checking
      if (hasPermission) break;
    }
    
    return hasPermission;
  }
}

// Test the permission system
const permissionSystem = new PermissionSystem();

// Sample data
const users = {
  guest: { role: "guest" },
  alice: { id: 101, role: "user", name: "Alice" },
  bob: { id: 102, role: "moderator", name: "Bob" },
  charlie: { id: 103, role: "admin", name: "Charlie" },
  diana: { id: 104, role: "superadmin", name: "Diana" }
};

const resources = {
  publishedArticle: { 
    type: "article", 
    id: 201, 
    status: "published", 
    authorId: 101, 
    title: "Published Article" 
  },
  draftArticle: { 
    type: "article", 
    id: 202, 
    status: "draft", 
    authorId: 101, 
    title: "Draft Article" 
  },
  comment: {
    type: "comment",
    id: 301,
    articleStatus: "published",
    authorId: 101,
    createdAt: new Date(Date.now() - 10*60*1000), // 10 minutes ago
    content: "This is a comment"
  },
  userProfile: {
    type: "user",
    id: 102,
    role: "moderator",
    name: "Bob"
  },
  criticalSetting: {
    type: "setting",
    id: 401,
    isCritical: true,
    name: "DatabaseConnection"
  }
};

// Test permissions
console.log("Guest viewing published article:", 
  permissionSystem.can(users.guest, "view", resources.publishedArticle));

console.log("User editing own article:", 
  permissionSystem.can(users.alice, "edit", resources.publishedArticle));

console.log("User deleting published article:", 
  permissionSystem.can(users.alice, "delete", resources.publishedArticle));

console.log("User deleting draft article:", 
  permissionSystem.can(users.alice, "delete", resources.draftArticle));

console.log("Moderator publishing draft:", 
  permissionSystem.can(users.bob, "publish", resources.draftArticle));

console.log("Moderator banning admin:", 
  permissionSystem.can(users.bob, "ban", resources.userProfile));

console.log("Admin editing critical setting:", 
  permissionSystem.can(users.charlie, "edit", resources.criticalSetting));

console.log("Superadmin editing critical setting:", 
  permissionSystem.can(users.diana, "edit", resources.criticalSetting));

Key Takeaways

• Comparison operators (==, ===, !=, !==, >, <, >=, <=) evaluate to boolean values and form the basis of conditional logic
• Prefer strict equality operators (===, !==) to avoid unexpected type coercion
• String comparison follows lexicographical (dictionary) ordering, not numeric ordering
• For internationalized applications, use localeCompare() for language-specific string comparisons
• Objects and arrays are compared by reference, not by content
• Logical operators (&&, ||, !) combine conditions and exhibit short-circuit behavior
• The nullish coalescing operator (??) provides a way to handle null and undefined without affecting other falsy values
• The conditional (ternary) operator offers a concise way to write simple conditional expressions
• Comparison and logical operators are essential for implementing permission systems, form validation, filtering, and other common programming tasks
• Expressions are code fragments that produce values and are the building blocks of JavaScript statements
• Operator precedence determines the order in which operations are performed in complex expressions
• Associativity (left-to-right or right-to-left) resolves the evaluation order when operators have the same precedence
• Parentheses () have the highest precedence and can be used to override the default evaluation order
• Expressions can have side effects (modifying variables, calling functions with side effects) in addition to producing values
• Common precedence pitfalls include logical operator combinations, assignment vs. equality, and increment/decrement in expressions
• Best practices include using parentheses for clarity, breaking complex expressions into variables, avoiding side effects in complex expressions, and using functions for readability
• Refactoring complex expressions into simpler components makes code more maintainable and less error-prone

Additional Resources

• MDN: Operator Precedence
• MDN: Expressions and Operators
• JavaScript.info: Operators
• JavaScript.info: Logical Operators
• ECMAScript Specification: Expressions
• Exploring JS: Operators
• You Don't Know JS: Operator Precedence