CODEWITHSUNDEEP
javascriptjquery
Alan2
Alan2

Reputation: 24572

Can I refactor if - else with a switch or case statement in javascript?

I have the following code:

var btns1 = {
    'Submit': function (win) {
        submitHandler(oLink.$link, $('#main-form'), false);
    },
    'Submit & Close': function (win) {
        submitHandler(oLink.$link, $('#main-form'), true);
    },
    'Close': function (win) {
        modal.closeModal()
    }
}
var btns2 = {
    'Submit & Close': function (win) {
        submitHandler(oLink.$link, $('#main-form'), true);
    },
    'Close': function (win) {
        modal.closeModal()
    }
}

if (oLink.title.substr(0, 4) == "Crea") {
    if (content.match(/data-RowKey="(.{3}).*/)) {
        oLink.title += " " + content.match(/data-RowKey="(.{3}).*/)[1]
    }
    var btns = btns1;
}
if (oLink.title.substr(0, 4) == "Edit") {
    var btns = btns1;
}
if (oLink.title.substr(0, 4) == "Dele") {
    var btns = btns2;
}

Is there a way that I could refactor the code. What I was thinking was to put this into a function called "adminModalBtns", have it take oLink and content as a parameter and have it return btns. Would it be most clear to do this with if-else or a case statement?

Upvotes: 1

Views: 222

Answers (3)

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

You can also refactor your code by using a hash map conditionMap and create a variable re to store the regular expression /data-RowKey="(.{3}).*/:

var getButtons = function (oLink, content) {
        var re = new RegExp(/data-RowKey="(.{3}).*/),
            btns1 = {
                'Submit': function (win) {
                    submitHandler(oLink.$link, $('#main-form'), false);
                }
            },
            btns2 = {
                'Submit & Close': function (win) {
                    submitHandler(oLink.$link, $('#main-form'), true);
                },
                'Close': function (win) {
                    modal.closeModal();
                }
            },
            conditionMap = {
                'Crea': (content.match(re)) && (oLink.title += ' ' + content.match(re)[1]),
                'Edit': $.extend(btns1, btns2),
                'Dele': btns2
            };

        return conditionMap[oLink.title.substr(0, 4)];
    },
    btns = getButtons(oLink, content);

Upvotes: 0

KooiInc
KooiInc

Reputation: 122936

Alternatively you could use ternary operators

var sub = oLink.title.substr(0, 4)
   ,bttns =  sub === "Crea" ? btns1 
           : sub === "Edit" ? btns1 
           : btns2;
oLink.title += /data-RowKey="(.{3}).*/.test(content) 
               ? ' ' + content.match(/data-RowKey="(.{3}).*/)[1] 
               : '';

Upvotes: 1

Diode
Diode

Reputation: 25155

function getButtons(oLink, content) {

    var btns1 = {
        'Submit': function(win) {
            submitHandler(oLink.$link, $('#main-form'), false);
        }
    }
    var btns2 = {
        'Submit & Close': function(win) {
            submitHandler(oLink.$link, $('#main-form'), true);
        },
        'Close': function(win) {
            modal.closeModal()
        }
    }
    switch (oLink.title.substr(0, 4)) {
    case "Crea":
        if (content.match(/data-RowKey="(.{3}).*/)) {
            oLink.title += " " + content.match(/data-RowKey="(.{3}).*/)[1]
        }
    case "Edit":
        return $.extend(btns1, btns2);
    case "Dele":
        return btns2;
    }
}

var btns = getButtons(oLink, content);

Upvotes: 1

Related Questions