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]

Solution 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 ) { ... }

Solution 2

If you want a clean way to check if a variable equals any of a number of other variables, try using a function like this:

http://jsfiddle.net/aYRmL/

function equalsAny (first) {
    return !![].slice.call(arguments, 1).filter(function (val) {
        return first === val;
    }).length;
}

The first argument is the one being compared to the rest. Use it like this:

var a = 'banana', b = 'orange';
equalsAny(a, 'banana', 'apple'); // returns true
equalsAny('orange', a, b); // returns true

The first one above accomplishes what you were trying to do with a == ('banana' || 'apple'). The seconds accomplishes what you were trying to do with (a || b) == 'banana'.

Comments

[Jonathan Lonowski]

JavaScript's || doesn't always result in a boolean. It will return the value of a or b as is. console.log(1 || 2); logs 1, not true.

[elclanrs]

Because short circuit evaluation

[elclanrs]

You could reduce a bit if you pass the first argument as an actual argument, then you slice 1 element of the array and chain the filter. ie jsfiddle.net/aYRmL/2

[aleclarson]

@elclanrs yeah this was just a quickie off the top of my head. fixed now.