10 Clever Ways to Replace if‑else in JavaScript

If you use traditional if‑else statements for complex conditions, the code can quickly become verbose and hard to maintain. Below are several alternative approaches.

1. Object mapping replaces if‑else

Traditional code

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 code

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

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

2. Array.includes replaces multiple conditions

Traditional code

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

Alternative code

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

3. Ternary operator chain

Traditional

Alternative

4. Clever use of && and || operators

5. Switch pattern matching

6. Using Proxy for condition interception

7. Functional programming methods

8. State machine pattern

9. Using decorators to handle conditions

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

Feel free to add more.