[removed] How can I simplify an if-statement with multiple OR conditions?

Question

Sorry if I\'ve made mistakes writing this post. I\'m new here and I don\'t know how this works, hope I learn quick. I am also new at JavaScript.

So the question is:

Answer 1

The way you are implementing this logic I would suggest a switch statement for readability like such:

switch (codePrompt){
case "switch()": 
{
    //Handle case
    break;
}
case "switch(background)": 
{  
   //Handle Case
   break;
}
case "blur()":
{
    //Handle Case
    break;
}
default :
{
  alert("Wrong command, try again.");
  console.log("Wrong command, try again.");
}

Answer 2

Because JavaScript has short circuit evaluation and your strings are truthy then you need to use the second approach or what you referred to as "the normal way".

The first way does not work because you end up evaluating the wrong thing. Evaluation works like this:

var result = 0 || "zero" ;

• 0 is evaluated and determined to be falsy.
• "zero" is evaluated as truthy and becomes the result.

var result = "zero" || 0 ;

• "zero" is evaluated and determined to be truthy and returned as the result.
• 0 is not evaluated because short circuit evaluation.

In your original code:

if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)){};

The operator associativity of || is left to right. Parenthesis are evaluated inner to outer.

(codeSwitch || codeSwitchBG || codeBlur || codeShowInfo) is evaluated first. Because of the rules we already discussed the result becomes codeSwitch:

• codeSwitch || codeSwitchBG becomes codeSwitch
• codeSwitch || codeBlur becomes codeSwitch
• codeSwitch || codeShowInfo becomes codeSwitch

So you end up evaluating:

if(codePrompt == codeSwitch)

Which of course is wrong.

Answer 3

You must do it the second way you mentioned:

if (codePrompt == codeSwitch ||
codePrompt == codeSwitchBG || codePrompt == codeBlur || codePrompt == codeShowInfo){};

Answer 4

You could also refactor as follows to cut out the if/switch:

var commands = {
    'switch()': 'Switching background',
    'switch(background)': 'Switching background',
    'blur()': 'Blurring elements',
    'showInfo()': 'Showing info'
};

$(".code").on("click", function () {
    var codePrompt = prompt("Set the code in the command line.");
    if (commands.hasOwnProperty(codePrompt)) {
        alert(commands[codePrompt] + '...');
        console.log("Used '" + codePrompt + "' command.");
    } else {
        alert("Wrong command, try again.");
        console.log("Wrong command, try again.");
    }
});

Answer 5

The "normal" way works the way you probably expect.

However, that if statement is redundant, anyway. You can just skip it:

if (codePrompt === codeSwitch) {
    alert("Switching background...");
    console.log("Used '" + codeSwitch + "' command.");
} else if (codePrompt === codeBlur) {
    alert("Blurring elements...");
    console.log("Used '" + codeBlur + "' command.");
} else if (codePrompt === codeSwitchBG) {
    alert("Switching background...");
    console.log("Used '" + codeSwitchBG + "' command.");
} else if (codePrompt === codeShowInfo) {
    alert("Showing info...");
    console.log("Used '" + codeShowInfo + "' command.");
} else {
    alert("Wrong command, try again.");
    console.log("Wrong command, try again.");
}

This is a good use case for a switch, and I would refactor it this way:

var alertMessage = "",
    consoleMessage = "Used '" + codePrompt + "' command.";
switch (codePrompt) {
    case codeSwitch:
        alertMessage = "Switching background...";
        break;
    case codeBlur:
        alertMessage = "Blurring elements...";
        break;
    case codeSwitchBG:
        alertMessage = "Switching background...";
        break;
    case codeShowInfo:
        alertMessage = "Showing info...";
        break;
    default:
        alertMessage = consoleMessage = "Wrong command, try again.";
        break;
}
alert(alertMessage);
console.log(consoleMessage);

Answer 6

Yes, you have to make it the 'normal' way.

What

if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)){};

does is

1) test all the switches -- returns TRUE if any are TRUE

2) test if codePrompt == TRUE or FALSE.

Based on your code, you can remove that test altogether and simply drop through to your final ELSE.

Another option is use a SWITCH statement, the last ELSE becoming the DEFAULT clause.