Javascript: How Can I Simplify An If-statement With Multiple Or Conditions?

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: I have this on my

Solution 1:

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.");
} elseif (codePrompt === codeBlur) {
    alert("Blurring elements...");
    console.log("Used '" + codeBlur + "' command.");
} elseif (codePrompt === codeSwitchBG) {
    alert("Switching background...");
    console.log("Used '" + codeSwitchBG + "' command.");
} elseif (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);

Solution 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.

Solution 3:

You must do it the second way you mentioned:

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

Solution 4:

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.");
}

Solution 5:

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.");
    }
});