javascript - Multiple conditions in if statement on both sides of the logical operator

Question

I was experimenting with having multiple arguments in an if statement on both sides of the logical operator. I first started with the || operator, which worked as expected:

var a = 'apple', b = 'banana', c = 'cherry';

if (a == 'banana' || a == 'apple' || b == 'banana' || b == 'apple') {
    console.log('example 1') // returns
}

if ((a || b) == 'banana' || (a || b) == 'apple') {
    console.log('example 2') // returns
}

if (a == ('apple' || 'banana') || b == ('apple' || 'banana')) {
    console.log('example 3') // returns
}

if ((a || b) == ('apple' || 'banana')) {
    console.log('example 4') // returns
}

So far, no unexpected results. However, when following a similar structure when replacing the || operator for the && operator, things don't quite work as I expect them to.

if ((a == 'banana' && b == 'apple') || (a == 'apple' && b == 'banana')) {
    console.log('example 5') // returns
}

if (((a || b) == 'banana') && ((a || b) == 'apple')) {
    console.log('example 6') // DOESN'T RETURN
}

if ((a || b) == 'banana') {
    console.log('example 6a') // DOESN'T RETURN - consistent with example 6
}

if ((a == ('apple' || 'banana')) && (b == ('apple' || 'banana'))) {
    console.log('example 7') // DOESN'T RETURN
}

if (a == ('apple' || 'banana')) {
    console.log('example 7a') // returns - inconsistent with example 7
}

if (b == ('apple' || 'banana')) {
    console.log('example 7b') // DOESN'T RETURN - inconsistent with example 7a
}

if ((a && b) == ('apple' || 'banana')) {
    console.log('example 8') // DOESN'T RETURN
}

if ('apple' == (a || b) && 'banana' == (a || b)) {
    console.log('example 9') // DOESN'T RETURN
}

Now, I am wondering: is there a flaw in my logic or can it just not be done this way? My aim is to write these if statements as short as possible, for the purpose of readibility and maintainability. Clearly I am just exploring possibilities.

Does anyone know any way to go about this? Especially example 7/7a/7b seems peculiar to me because it yields inconsistent results despite a similar structure [Fiddle]

Answer 1

The Logical OR operator doesn't work in a way you're looking for.

Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true; if both are false, returns false.

MDN

One alternative way could be make use of array's indexOf method. Just be aware it will return the index of the array element, so 0 could be a valid value also. In order to make our if statement works as expected, we have to use 0 <= ... like this:

if ( 0 <= ["apple","banana"].indexOf(a) ) { ... }

The other thing you can do is using in operator. Also as it checks only against the keys, you can leave the values empty like this:

if ( a in { "apple": "", "banana": "" } ) { ... }

If you have lot's of options, obviously it's better to do the following:

var options = {
    "apple": "",
    "banana": ""
}

if ( a in options ) { ... }

Personally I think with just two options to check, this will be more readable for a human-eye to go for two separated checks, and I think in your examples you don't really need to shorten the if statements as they're already quite short and readable in my opinion.

if ( "apple" === a || "banana" === a ) { ... }