Conditional Logic

How Conditional Logic Improves Code Quality

Understanding conditional logic enables developers to write more maintainable and efficient code. This technique reduces complexity while improving readability, making it essential for modern JavaScript development. Teams adopting this pattern report fewer bugs and faster development cycles.

TL;DR
Use ternary operators in template literals
Conditional Logic works seamlessly with modern JavaScript features
Reduces if-else chains and improves readability
Perfect for pluralization and status messages
const result = process(data)

The Conditional Logic Challenge

You're reviewing code that's become increasingly difficult to maintain. The current implementation uses complex if-else chains for building messages that make debugging time-consuming and error-prone. Each modification risks breaking the branching logic that only surfaces with specific data conditions in production.

// The problematic approach
const stock = { count: 1, status: 'low' }
function oldStatus(data) {
  let msg = data.count + ' item'
  if (data.count !== 1) msg += 's'
  msg += ' in stock - '
  if (data.status === 'low') msg += 'Order soon!'
  else msg += 'Available'
  return msg
}
console.log('Old way:', oldStatus(stock))

Modern conditional logic patterns eliminate these issues with cleaner, more expressive syntax that clearly communicates intent:

// The elegant solution with ternary operators
const stock = { count: 1, status: 'low' }
function newStatus(data) {
  const plural = data.count !== 1 ? 's' : ''
  const status = data.status === 'low' ? 'Order soon!' : 'Available'
  const msg = `${data.count} item${plural} in stock - ${status}`
  console.log('Building status message')
  console.log('Conditionals evaluated:', true)
  return msg
}
console.log('Final output:', newStatus(stock))

Best Practises

Use conditional logic when:

✅ Handling pluralization in messages
✅ Showing/hiding optional text segments
✅ Switching between status messages
✅ Formatting based on data conditions

Avoid when:

🚩 Multiple nested ternaries reduce readability
🚩 Complex logic needs multiple statements
🚩 Side effects occur in conditional branches
🚩 Fallback logic requires error handling

System Design Trade-offs

Aspect	Ternary in Templates	If-Else Chains
Readability	Good for simple cases	Better for complex
Performance	Excellent - single pass	Good - multiple steps
Maintainability	High - inline logic	Medium - scattered
Complexity Limit	Low - one condition	High - many branches
Debugging	Visible in template	Step through needed
Browser Support	ES6+ required	All browsers

More Code Examples

❌ If-else spaghetti code

// Traditional approach with complex branching
function generateNotification(data) {
  if (!data) {
    throw new Error('Data required')
  }
  let notification = ''
  if (data.type === 'order') {
    notification += 'Order '
    if (data.status === 'pending') {
      notification += '#' + data.id + ' is being processed'
    } else if (data.status === 'shipped') {
      notification += '#' + data.id + ' has been shipped'
    } else if (data.status === 'delivered') {
      notification += '#' + data.id + ' was delivered'
    } else {
      notification += '#' + data.id + ' status: ' + data.status
    }
  } else if (data.type === 'user') {
    if (data.count === 1) {
      notification += '1 new user signed up'
    } else if (data.count > 1) {
      notification += data.count + ' new users signed up'
    } else {
      notification += 'No new users'
    }
  } else if (data.type === 'alert') {
    notification += 'Alert: '
    if (data.severity === 'high') {
      notification += 'URGENT - ' + data.message
    } else if (data.severity === 'medium') {
      notification += 'Warning - ' + data.message
    } else {
      notification += 'Info - ' + data.message
    }
  }
  if (data.timestamp) {
    const time = new Date(data.timestamp)
    notification += ' at ' + time.toLocaleTimeString()
  }
  console.log('Building notification for type:', data.type)
  const result = {
    message: notification,
    type: data.type,
    timestamp: Date.now(),
  }
  console.log('Traditional notification built')
  return result
}
// Test the traditional approach
const testData = {
  type: 'order',
  id: 12345,
  status: 'shipped',
  timestamp: Date.now(),
}
const traditionalOutput = generateNotification(testData)
console.log('Notification:', traditionalOutput.message)

✅ Ternary operator clarity

// Modern approach with inline conditionals
function generateNotification(data) {
  if (!data) {
    throw new Error('Data required')
  }
  const getOrderStatus = (status) => {
    return status === 'pending'
      ? 'is being processed'
      : status === 'shipped'
        ? 'has been shipped'
        : status === 'delivered'
          ? 'was delivered'
          : `status: ${status}`
  }
  const getSeverityPrefix = (severity) => {
    return severity === 'high' ? 'URGENT' : severity === 'medium' ? 'Warning' : 'Info'
  }
  const notification =
    data.type === 'order'
      ? `Order #${data.id} ${getOrderStatus(data.status)}`
      : data.type === 'user'
        ? `${data.count === 0 ? 'No' : data.count} new user` +
          `${data.count !== 1 ? 's' : ''}` +
          ` ${data.count > 0 ? 'signed up' : ''}`
        : data.type === 'alert'
          ? `Alert: ${getSeverityPrefix(data.severity)} - ${data.message}`
          : ''
  const timeStr = data.timestamp ? ` at ${new Date(data.timestamp).toLocaleTimeString()}` : ''
  const finalMsg = `${notification}${timeStr}`
  console.log('Building notification for type:', data.type)
  const result = {
    message: finalMsg,
    type: data.type,
    timestamp: Date.now(),
  }
  console.log('Modern notification built')
  return result
}
// Test the modern approach
const testData = {
  type: 'order',
  id: 12345,
  status: 'shipped',
  timestamp: Date.now(),
}
const modernOutput = generateNotification(testData)
console.log('Notification:', modernOutput.message)
// Additional conditional examples
const items = 3
const cartMsg = `You have ${items} item${items !== 1 ? 's' : ''} in cart`
console.log(cartMsg)
const score = 85
const letter = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'F'
const grade = `Grade: ${letter}`
console.log(grade)

Technical Trivia

The Conditional Logic Bug of 2018: A major messaging platform experienced a critical bug when developers incorrectly nested ternary operators in notification templates. The bug caused user counts to display negative numbers and plural forms to appear for single items, confusing millions of users worldwide.

Why the pattern failed: The implementation used deeply nested ternaries without parentheses, causing operator precedence issues. When combined with type coercion, conditions evaluated in unexpected order, producing grammatically incorrect messages that damaged user trust.

Modern tooling prevents these issues: Today's JavaScript engines and development tools provide better syntax highlighting and linting for complex conditionals. Using template literals with simple ternary operators or extracting complex logic ensures these display failures don't occur in production systems.

Master Conditional Logic: Implementation Strategy

Choose conditional logic patterns when building dynamic messages that adapt to data. The inline clarity benefits outweigh any minor complexity considerations for simple conditions. Reserve if-else statements for complex branching that would make templates unreadable, but remember that ternary operators prevent message construction errors.