10 Clean Alternatives to If‑Else in JavaScript for Maintainable Code

When traditional if‑else statements become lengthy and hard to maintain, JavaScript provides several cleaner alternatives that improve readability and scalability.

1. Object Mapping to Replace if‑else

Traditional version

function getPrice(user) {
    if (user.type === 'vip') {
        return 'VIP价格';
    } else if (user.type === 'svip') {
        return 'SVIP价格';
    } else if (user.type === 'vvip') {
        return 'VVIP价格';
    } else {
        return '普通价格';
    }
}

Alternative version

const priceStrategy = {
    vip: () => 'VIP价格',
    svip: () => 'SVIP价格',
    vvip: () => 'VVIP价格',
    default: () => '普通价格'
};

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. Chaining Ternary Operators

4. Clever Use of && and || Operators

5. Switch Pattern Matching

6. Using Proxy for Conditional Interception

7. Functional Programming Techniques

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() {
        // 编辑文档
    }
}