CODEWITHSUNDEEP
javascriptjquery
PauloNunes
PauloNunes

Reputation: 9

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 code.elements.js file and I can't make it work.

Does putting this work?

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

Or do I have to make it by the normal way?, like 

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


var codeSwitch = 'switch()';
var codeSwitchBG = 'switch(background)';
var codeBlur = 'blur()';
var codeShowInfo = 'showInfo()';

$(".code").on("click", function () {
var codePrompt = prompt("Set the code in the command line.");
if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)) {
    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.");
};
});

Upvotes: 0

Views: 8850

Answers (6)

Stuart
Stuart

Reputation: 9868

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

Upvotes: 0

P.Brian.Mackey
P.Brian.Mackey

Reputation: 44295

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.

Upvotes: 1

Peter Olson
Peter Olson

Reputation: 143037

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);

Upvotes: 2

Tyshun
Tyshun

Reputation: 325

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

Upvotes: 0

lwalden
lwalden

Reputation: 803

You must do it the second way you mentioned:

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

Upvotes: 1

user3594341
user3594341

Reputation: 31

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.

Upvotes: -1

Related Questions