Ternary Operator

// Syntax: condition ? valueIfTrue : valueIfFalse
 // Regular if-else
const age = 20
let status
if (age >= 18) {
  status = 'Adult'
} else {
  status = 'Minor'
}
 // Ternary (same thing, shorter!)
const status = age >= 18 ? 'Adult' : 'Minor'
 console.log(status)  // 'Adult'

// Even or odd
const num = 7
const result = num % 2 === 0 ? 'even' : 'odd'
console.log(result)  // 'odd'
 // Pass or fail
const score = 75
const grade = score >= 60 ? 'PASS' : 'FAIL'
console.log(grade)  // 'PASS'
 // Price with discount
const price = 100
const isMember = true
const finalPrice = isMember ? price * 0.9 : price
console.log(finalPrice)  // 90
 // Max of two numbers
const a = 10
const b = 20
const max = a > b ? a : b
console.log(max)  // 20

const score = 85
 // Nested ternary
const grade = score >= 90 ? 'A' :
              score >= 80 ? 'B' :
              score >= 70 ? 'C' :
              score >= 60 ? 'D' : 'F'
 console.log(grade)  // 'B'
 // Same as:
let grade2
if (score >= 90) {
  grade2 = 'A'
} else if (score >= 80) {
  grade2 = 'B'
} else if (score >= 70) {
  grade2 = 'C'
} else if (score >= 60) {
  grade2 = 'D'
} else {
  grade2 = 'F'
}

// Setting a variable
const userType = isLoggedIn ? 'member' : 'guest'
 // In function returns
const getDiscount = (isMember) => isMember ? 0.20 : 0
 // In template strings
console.log(\`You have \${count} \${count === 1 ? 'item' : 'items'}\`)
 // Inline in JSX/Vue templates
// <div>{{ isActive ? 'Active' : 'Inactive' }}</div>

// Don't use for complex logic
// BAD:
const result = condition1 ? (
  condition2 ? 'A' : (
    condition3 ? 'B' : (
      condition4 ? 'C' : 'D'
    )
  )
) : 'E'
 // BETTER: Use if-else
if (condition1 && condition2) {
  result = 'A'
} else if (condition1 && condition3) {
  result = 'B'
}
// ... much clearer!