10 Cleaner Alternatives to if‑else in JavaScript

If you rely on traditional if‑else statements for complex conditions, your code can become verbose and hard to maintain; this article presents several concise alternatives.

1. Object mapping instead of if‑else

Traditional version

function getPrice(user) {
  if (user.type === 'vip') {
    return 'VIP price';
  } else if (user.type === 'svip') {
    return 'SVIP price';
  } else if (user.type === 'vvip') {
    return 'VVIP price';
  } else {
    return 'Regular price';
  }
}

Alternative version

const priceStrategy = {
  vip: () => 'VIP price',
  svip: () => 'SVIP price',
  vvip: () => 'VVIP price',
  default: () => 'Regular price'
};

function getPrice(user) {
  return (priceStrategy[user.type] || priceStrategy.default)();
}

2. Using Array.includes for multiple conditions

Traditional version

if (status === 'failed' || status === 'error' || status === 'rejected') {
  handleError();
}

Alternative version

const errorStatus = ['failed', 'error', 'rejected'];
if (errorStatus.includes(status)) {
  handleError();
}

3. Chained ternary operators

4. Clever use of && and || operators

5. Switch pattern matching

6. Using Proxy for condition interception

7. Functional programming approaches

8. State machine pattern

9. Decorator for permission checks

function checkPermission(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    if (this.user?.hasPermission) {
      return original.apply(this, args);
    }
    throw new Error('No permission');
  };
  return descriptor;
}

class Document {
  @checkPermission
  edit() {
    // edit document
  }
}

Feel free to add more examples.