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

you need to make it the normal way. Or you could use switch: http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript — juvian, May 30 '14 at 17:11
You need to be more specific than "doesn't work". Can you explain the issue you're having? — Sam Hanley, May 30 '14 at 17:11

Peter Olson · Answer 1 · 2014-05-30T17:23:37.883

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

thx mate, that helped me a lot. I've put the link of the post and the comment reference on the file so all the people will know who helped me. — PauloNunes, May 30 '14 at 17:50

score 1 · Answer 2 · edited May 30 '14 at 17:19

1

You must do it the second way you mentioned:

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

edited May 30 '14 at 17:19

nicholaswmin

21,686
15
91
167

answered May 30 '14 at 17:12

lwalden

813
7
11

P.Brian.Mackey · Accepted Answer · 2014-05-30T18:49:12.447

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.

score 0 · Answer 4 · answered May 30 '14 at 17:21

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

score 0 · Answer 5 · answered Jun 12 '14 at 00:30

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

score -1 · Answer 6 · answered May 30 '14 at 17:19

-1

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.

answered May 30 '14 at 17:19

user3594341

31
1
6

That's wrong, `||` returns the truthy value, not true or false – Siddharth Shyniben Sep 19 '21 at 10:32

Javascript: How can I simplify an if-statement with multiple OR conditions?

6 Answers6

Linked

Related