examples

/**
 * ============================================
 * 3.6 TERNARY OPERATOR - EXAMPLES
 * ============================================
 */

// ============================================
// EXAMPLE 1: Basic Ternary
// ============================================

console.log('--- Basic Ternary ---');

const age = 20;
const status = age >= 18 ? 'adult' : 'minor';
console.log('Age:', age, 'Status:', status);

const score = 75;
const passed = score >= 60 ? 'Passed' : 'Failed';
console.log('Score:', score, 'Result:', passed);

const hour = 14;
const greeting = hour < 12 ? 'Good morning' : 'Good afternoon';
console.log('Hour:', hour, 'Greeting:', greeting);

// ============================================
// EXAMPLE 2: Ternary vs if-else
// ============================================

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

// Using if-else
let message1;
const isLoggedIn = true;
if (isLoggedIn) {
  message1 = 'Welcome back!';
} else {
  message1 = 'Please log in';
}
console.log('if-else result:', message1);

// Using ternary (same result, shorter)
const message2 = isLoggedIn ? 'Welcome back!' : 'Please log in';
console.log('Ternary result:', message2);

// ============================================
// EXAMPLE 3: Ternary in String Interpolation
// ============================================

console.log('\n--- String Interpolation ---');

const user = { name: 'Alice', isPremium: true };
const welcomeMessage = `Hello, ${user.name}! You are a ${
  user.isPremium ? 'premium' : 'regular'
} member.`;
console.log(welcomeMessage);

const itemCount = 5;
console.log(
  `You have ${itemCount} item${itemCount !== 1 ? 's' : ''} in your cart.`
);

const oneItem = 1;
console.log(
  `You have ${oneItem} item${oneItem !== 1 ? 's' : ''} in your cart.`
);

// ============================================
// EXAMPLE 4: Ternary for Default Values
// ============================================

console.log('\n--- Default Values ---');

const inputName = '';
const displayName = inputName ? inputName : 'Guest';
console.log('Display name:', displayName);

const userInput = 'John';
const userName = userInput ? userInput : 'Anonymous';
console.log('User name:', userName);

// With numbers (be careful with 0)
const count = 0;
const displayCount = count ? count : 'No items'; // "No items" (0 is falsy!)
console.log('Count display:', displayCount);

// Better for numbers: use nullish coalescing
const betterCount = count ?? 'No items'; // 0 (only null/undefined trigger default)
console.log('Better count:', betterCount);

// ============================================
// EXAMPLE 5: Nested Ternary
// ============================================

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

const testScore = 85;

// Nested ternary for grade
const grade =
  testScore >= 90
    ? 'A'
    : testScore >= 80
    ? 'B'
    : testScore >= 70
    ? 'C'
    : testScore >= 60
    ? 'D'
    : 'F';

console.log('Score:', testScore, 'Grade:', grade);

// Age category
const personAge = 25;
const category =
  personAge < 13
    ? 'child'
    : personAge < 20
    ? 'teenager'
    : personAge < 65
    ? 'adult'
    : 'senior';

console.log('Age:', personAge, 'Category:', category);

// ============================================
// EXAMPLE 6: Ternary with Functions
// ============================================

console.log('\n--- Ternary with Functions ---');

const processSync = () => 'Processed synchronously';
const processAsync = () => 'Processed asynchronously';

const useAsync = false;
const result = useAsync ? processAsync() : processSync();
console.log(result);

// Choosing which function to call
const numbers = [3, 1, 4, 1, 5];
const shouldSort = true;
const processed = shouldSort ? numbers.slice().sort() : numbers;
console.log('Processed:', processed);

// ============================================
// EXAMPLE 7: Ternary in Object Properties
// ============================================

console.log('\n--- Object Properties ---');

const isProduction = false;

const config = {
  mode: isProduction ? 'production' : 'development',
  debug: isProduction ? false : true,
  logLevel: isProduction ? 'error' : 'debug',
  apiUrl: isProduction ? 'https://api.prod.com' : 'http://localhost:3000',
};

console.log('Config:', config);

// Conditional property inclusion
const includeDebugInfo = true;
const response = {
  status: 'success',
  data: { id: 1, name: 'Item' },
  ...(includeDebugInfo ? { debug: { timestamp: Date.now() } } : {}),
};
console.log('Response:', response);

// ============================================
// EXAMPLE 8: Ternary in Arrays
// ============================================

console.log('\n--- Arrays ---');

const isAdmin = true;
const menuItems = [
  'Home',
  'Profile',
  isAdmin ? 'Admin Panel' : null,
  'Settings',
].filter(Boolean); // Remove null values

console.log('Menu items:', menuItems);

// Conditional array spread
const baseFeatures = ['feature1', 'feature2'];
const premiumFeatures = ['feature3', 'feature4'];
const isPremiumUser = true;

const allFeatures = [
  ...baseFeatures,
  ...(isPremiumUser ? premiumFeatures : []),
];
console.log('All features:', allFeatures);

// ============================================
// EXAMPLE 9: Ternary for CSS Classes
// ============================================

console.log('\n--- CSS Class Selection ---');

const isActive = true;
const isDisabled = false;

const buttonClass = `btn ${isActive ? 'btn-active' : 'btn-inactive'} ${
  isDisabled ? 'btn-disabled' : ''
}`.trim();
console.log('Button class:', buttonClass);

// Multiple conditions
const theme = 'dark';
const size = 'large';

const containerClass = [
  'container',
  theme === 'dark' ? 'theme-dark' : 'theme-light',
  size === 'large' ? 'size-lg' : size === 'small' ? 'size-sm' : 'size-md',
].join(' ');
console.log('Container class:', containerClass);

// ============================================
// EXAMPLE 10: Complex Conditions
// ============================================

console.log('\n--- Complex Conditions ---');

const userRole = 'editor';
const hasSubscription = true;

// Complex condition with ternary
const accessLevel =
  userRole === 'admin'
    ? 'full'
    : userRole === 'editor' && hasSubscription
    ? 'write'
    : userRole === 'editor'
    ? 'read-limited'
    : hasSubscription
    ? 'read'
    : 'none';

console.log('Access level:', accessLevel);

// ============================================
// EXAMPLE 11: Ternary vs Logical Operators
// ============================================

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

const value = 'Hello';

// These can be similar but have differences:
const result1 = value ? value : 'default'; // Ternary
const result2 = value || 'default'; // OR operator

console.log('Ternary result:', result1);
console.log('OR result:', result2);

// Difference shows with empty string:
const emptyValue = '';
const ternaryResult = emptyValue !== undefined ? emptyValue : 'default';
const orResult = emptyValue || 'default';

console.log('Empty with ternary (checking undefined):', ternaryResult); // ""
console.log('Empty with OR:', orResult); // "default"

// ============================================
// EXAMPLE 12: Best Practices
// ============================================

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

// ✅ Good: Simple, clear ternary
const permission = true;
const accessMessage = permission ? 'Access granted' : 'Access denied';
console.log(accessMessage);

// ✅ Good: Formatted nested ternary
const httpStatus = 404;
const statusText =
  httpStatus === 200
    ? 'OK'
    : httpStatus === 404
    ? 'Not Found'
    : httpStatus === 500
    ? 'Server Error'
    : 'Unknown';
console.log('HTTP', httpStatus, ':', statusText);

// ❌ Avoid: Don't use ternary just to return boolean
const badWay = age >= 18 ? true : false; // Redundant!
const goodWay = age >= 18; // Just use the expression
console.log('Avoid redundant boolean ternary');

// ❌ Avoid: Side effects in ternary
// isValid ? saveData() : showError();  // Bad!
// Use if-else for side effects instead:
const isValid = true;
if (isValid) {
  console.log('Data saved (if-else for side effects)');
} else {
  console.log('Error shown');
}

console.log('\n✅ All ternary operator examples completed!');