examples

/**
 * =====================================================
 * 4.1 IF/ELSE STATEMENTS - EXAMPLES
 * =====================================================
 * Conditional execution of code blocks
 */

// =====================================================
// 1. BASIC IF STATEMENT
// =====================================================

console.log('--- Basic if Statement ---');

const temperature = 28;

if (temperature > 25) {
  console.log("It's warm today!");
}

// Single line (braces optional but recommended)
if (temperature > 25) console.log('Still warm!');

// Multiple statements require braces
const age = 20;

if (age >= 18) {
  console.log('You are an adult');
  console.log('You can vote');
  console.log('You can drive');
}

// =====================================================
// 2. IF-ELSE STATEMENT
// =====================================================

console.log('\n--- if-else Statement ---');

const isLoggedIn = false;

if (isLoggedIn) {
  console.log('Welcome back, user!');
} else {
  console.log('Please log in to continue');
}

// With different data types
const balance = 0;

if (balance) {
  console.log(`Your balance: $${balance}`);
} else {
  console.log('Your account is empty');
}

// Boolean check
const hasPermission = true;

if (hasPermission) {
  console.log('Access granted');
} else {
  console.log('Access denied');
}

// =====================================================
// 3. IF-ELSE IF-ELSE CHAIN
// =====================================================

console.log('\n--- if-else if-else Chain ---');

const score = 78;

if (score >= 90) {
  console.log('Grade: A - Excellent!');
} else if (score >= 80) {
  console.log('Grade: B - Good job!');
} else if (score >= 70) {
  console.log('Grade: C - Satisfactory');
} else if (score >= 60) {
  console.log('Grade: D - Needs improvement');
} else {
  console.log('Grade: F - Failed');
}

// Time-based greeting
const hour = new Date().getHours();

if (hour < 12) {
  console.log('Good morning!');
} else if (hour < 17) {
  console.log('Good afternoon!');
} else if (hour < 21) {
  console.log('Good evening!');
} else {
  console.log('Good night!');
}

// HTTP status codes
const statusCode = 404;

if (statusCode >= 200 && statusCode < 300) {
  console.log('Success');
} else if (statusCode >= 300 && statusCode < 400) {
  console.log('Redirect');
} else if (statusCode >= 400 && statusCode < 500) {
  console.log('Client Error');
} else if (statusCode >= 500) {
  console.log('Server Error');
} else {
  console.log('Unknown status');
}

// =====================================================
// 4. NESTED CONDITIONALS
// =====================================================

console.log('\n--- Nested Conditionals ---');

const userAge = 25;
const hasLicense = true;
const hasInsurance = true;

if (userAge >= 18) {
  console.log('Age requirement met');

  if (hasLicense) {
    console.log('License verified');

    if (hasInsurance) {
      console.log('You are approved to rent a car!');
    } else {
      console.log('Please provide proof of insurance');
    }
  } else {
    console.log("You need a valid driver's license");
  }
} else {
  console.log('You must be 18 or older');
}

// Better: Flatten with logical operators
console.log('\n--- Flattened Version ---');

if (userAge >= 18 && hasLicense && hasInsurance) {
  console.log('You are approved to rent a car!');
} else if (userAge < 18) {
  console.log('You must be 18 or older');
} else if (!hasLicense) {
  console.log("You need a valid driver's license");
} else if (!hasInsurance) {
  console.log('Please provide proof of insurance');
}

// =====================================================
// 5. TRUTHY AND FALSY VALUES
// =====================================================

console.log('\n--- Truthy and Falsy Values ---');

// Falsy values
const falsyValues = [false, 0, -0, 0n, '', null, undefined, NaN];

falsyValues.forEach((value, index) => {
  if (value) {
    console.log(`${index}: truthy`);
  } else {
    console.log(`${index}: falsy - ${value === '' ? '""' : String(value)}`);
  }
});

// Truthy values (some surprises!)
console.log('\n--- Truthy Surprises ---');

if ([]) console.log('Empty array is truthy!');
if ({}) console.log('Empty object is truthy!');
if ('0') console.log("String '0' is truthy!");
if ('false') console.log("String 'false' is truthy!");
if (new Date()) console.log('Date object is truthy!');
if (-1) console.log('Negative numbers are truthy!');
if (Infinity) console.log('Infinity is truthy!');

// Practical use of truthy/falsy
const username = '';
const displayName = 'Guest';

if (username) {
  console.log(`Welcome, ${username}!`);
} else {
  console.log(`Welcome, ${displayName}!`);
}

// Array length check
const items = ['apple', 'banana'];

if (items.length) {
  console.log(`You have ${items.length} items`);
} else {
  console.log('Your cart is empty');
}

// =====================================================
// 6. COMPARISON OPERATORS
// =====================================================

console.log('\n--- Comparison Operators ---');

const num = 10;

// Equality comparisons
console.log("10 == '10':", 10 == '10'); // true (type coercion)
console.log("10 === '10':", 10 === '10'); // false (strict)
console.log("10 != '10':", 10 != '10'); // false
console.log("10 !== '10':", 10 !== '10'); // true

// Relational comparisons
console.log('10 > 5:', 10 > 5); // true
console.log('10 < 5:', 10 < 5); // false
console.log('10 >= 10:', 10 >= 10); // true
console.log('10 <= 9:', 10 <= 9); // false

// String comparisons (lexicographic)
console.log("'apple' < 'banana':", 'apple' < 'banana'); // true
console.log("'a' < 'A':", 'a' < 'A'); // false ('a' has higher char code)

// Range checking
const value = 50;

if (value >= 0 && value <= 100) {
  console.log('Value is in the 0-100 range');
}

// =====================================================
// 7. LOGICAL OPERATORS IN CONDITIONS
// =====================================================

console.log('\n--- Logical Operators ---');

const user = {
  age: 25,
  role: 'admin',
  isActive: true,
  isVerified: true,
};

// AND (&&) - all must be true
if (user.age >= 18 && user.isActive && user.isVerified) {
  console.log('User has full access');
}

// OR (||) - at least one must be true
if (user.role === 'admin' || user.role === 'moderator') {
  console.log('User has moderation privileges');
}

// NOT (!) - inverts boolean
if (!user.isActive) {
  console.log('Account is inactive');
} else {
  console.log('Account is active');
}

// Combining operators (use parentheses for clarity)
if ((user.role === 'admin' || user.role === 'moderator') && user.isActive) {
  console.log('Active staff member');
}

// Complex condition
const canAccessPremiumContent =
  user.age >= 18 &&
  user.isActive &&
  (user.role === 'admin' || user.role === 'premium');

if (canAccessPremiumContent) {
  console.log('Premium content unlocked');
}

// =====================================================
// 8. COMMON PATTERNS
// =====================================================

console.log('\n--- Common Patterns ---');

// Pattern 1: Null/Undefined checking
const data = { name: 'John' };

if (data !== null && data !== undefined) {
  console.log('Data exists:', data.name);
}

// Shorter version (checks both null and undefined)
if (data != null) {
  console.log('Data exists (short check):', data.name);
}

// Pattern 2: Property existence
if (data && data.name) {
  console.log('Name property exists:', data.name);
}

// Modern: Optional chaining
if (data?.name) {
  console.log('Name (optional chain):', data.name);
}

// Pattern 3: Default values
const inputValue = '';
let finalValue;

if (inputValue) {
  finalValue = inputValue;
} else {
  finalValue = 'default';
}
console.log('Final value:', finalValue);

// Shorter with ||
const shortValue = inputValue || 'default';
console.log('Short value:', shortValue);

// Pattern 4: Toggle
let isVisible = false;

function toggle() {
  if (isVisible) {
    isVisible = false;
  } else {
    isVisible = true;
  }
  // Or simply: isVisible = !isVisible;
  return isVisible;
}

console.log('Toggle:', toggle()); // true
console.log('Toggle:', toggle()); // false

// Pattern 5: Bounds checking
function clamp(value, min, max) {
  if (value < min) {
    return min;
  } else if (value > max) {
    return max;
  } else {
    return value;
  }
}

console.log('Clamp 5 (0-10):', clamp(5, 0, 10)); // 5
console.log('Clamp -5 (0-10):', clamp(-5, 0, 10)); // 0
console.log('Clamp 15 (0-10):', clamp(15, 0, 10)); // 10

// =====================================================
// 9. GUARD CLAUSES (EARLY RETURNS)
// =====================================================

console.log('\n--- Guard Clauses ---');

// Without guard clauses (deep nesting)
function processUserNested(user) {
  if (user) {
    if (user.isActive) {
      if (user.hasPermission) {
        console.log('Processing:', user.name);
        return true;
      } else {
        console.log('No permission');
        return false;
      }
    } else {
      console.log('User inactive');
      return false;
    }
  } else {
    console.log('No user');
    return false;
  }
}

// With guard clauses (flat and readable)
function processUserGuards(user) {
  if (!user) {
    console.log('No user');
    return false;
  }

  if (!user.isActive) {
    console.log('User inactive');
    return false;
  }

  if (!user.hasPermission) {
    console.log('No permission');
    return false;
  }

  console.log('Processing:', user.name);
  return true;
}

// Test both
const testUser = { name: 'Alice', isActive: true, hasPermission: true };
console.log('Nested result:', processUserNested(testUser));
console.log('Guards result:', processUserGuards(testUser));

// =====================================================
// 10. EXPRESSION VS STATEMENT
// =====================================================

console.log('\n--- if is a Statement ---');

// if/else is a statement - cannot be used where expressions are needed
const x = 10;

// ❌ This won't work:
// const result = if (x > 5) { "big" } else { "small" };

// ✅ Use ternary for expressions:
const result = x > 5 ? 'big' : 'small';
console.log('Ternary result:', result);

// ✅ Or use an IIFE (Immediately Invoked Function Expression):
const result2 = (() => {
  if (x > 5) {
    return 'big';
  } else {
    return 'small';
  }
})();
console.log('IIFE result:', result2);

// =====================================================
// 11. BEST PRACTICES EXAMPLES
// =====================================================

console.log('\n--- Best Practices ---');

// Always use braces
const condition = true;

// ❌ Bad - can cause bugs
if (condition) console.log('Line 1');
console.log('Line 2'); // This ALWAYS runs!

// ✅ Good - always use braces
if (condition) {
  console.log('Line A');
  console.log('Line B');
}

// Use strict equality
const val = '5';

// ❌ Avoid
if (val == 5) {
  console.log('Loose equality matched');
}

// ✅ Prefer
if (val === '5') {
  console.log('Strict equality matched');
}

// Positive conditions are easier to read
const isValid = true;

// ❌ Harder to read
if (!isValid === false) {
  console.log('Valid');
}

// ✅ Easier to read
if (isValid) {
  console.log('Valid');
}

// =====================================================
// SUMMARY
// =====================================================

console.log('\n--- Summary ---');
console.log(`
if/else Statement Types:
  - if (condition) { }
  - if (condition) { } else { }
  - if (cond1) { } else if (cond2) { } else { }
  - Nested if statements

Key Points:
  • Conditions evaluate to truthy/falsy
  • Only one branch executes
  • Order matters in else-if chains
  • Use === for strict comparison
  • Use guard clauses to reduce nesting
  • Always use braces for clarity
`);