Javascript logical operators - and vs. or

Question

I'm relatively new to Javascript and programming in general. Today while writing a simple triple dice roll simulator I struck a problem that I worked around but which I still don't understand. Here's my code...

//                      ROLLING TRIPLES

var diceSides = 6;
var diceOne = Math.floor(Math.random() * diceSides + 1);
var diceTwo = Math.floor(Math.random() * diceSides + 1);
var diceThree = Math.floor(Math.random() * diceSides + 1);
var rolls = 3;

while ((diceOne !== diceTwo) || (diceTwo !== diceThree)) {
    console.log("Dice 1: " + diceOne);
    diceOne = Math.floor(Math.random() * diceSides + 1);
    console.log("Dice 2: " + diceTwo);
    diceTwo = Math.floor(Math.random() * diceSides + 1);
    console.log("Dice 3: " + diceThree);
    diceThree = Math.floor(Math.random() * diceSides + 1);
    console.log("Rolling again");
    rolls += 3;
}
console.log("Dice 1: " + diceOne);
console.log("Dice 2: " + diceTwo);
console.log("Dice 3: " + diceThree);
console.log("Rolled a triple!!!");

console.log(rolls);

The problem is the 'while' condition: while ((diceOne !== diceTwo) || (diceTwo !== diceThree))

Using an '||' operator, the program functions as intended, and breaks out of the 'while' loop when diceOne = diceTwo = diceThree i.e. you roll a triple. This doesn't make sense to me however... Using an '||' operator it would appear that the 'while' loop would finish, the condition having evaluated to false with only TWO of the die being equal...

e.g. it would return a result like:

Dice 1: 4
Dice 2: 4
Dice 3: 6
Rolled a triple!!!

Because in this case, diceOne DOES equal diceTwo, even though diceTwo does not equal diceThree. In this case, using an '||' operator, I would expect the 'while' loop to stop because it appears the condition has been met... But it doesn't, it would return:

Dice 1: 4
Dice 2: 4
Dice 3: 6
Rolling again

...What I would expect with an '&&: operator. Except with an '&&' operator the code returns what I would expect with an '||' operator:

Dice 1: 4
Dice 2: 4
Dice 3: 6
Rolled a triple!!!

The code finishes, even though a triple hasn't been rolled. This is the way it sounds in my head with an '&&' operator...

"If diceOne and diceTwo AND diceThree are equal, you've rolled a triple."

with an '||' operator...

"If diceOne and diceTwo are equal, OR diceTwo and diceThree are equal, you've rolled a triple."

which you clearly haven't because only two of the three die are the same.

I know I'm going on and on and on... It's kinda hard for me to explain. There's probably a really simple explanation but it's really bugging me!

On a side note: is there any shortcut I can use to generate a random number numerous times without having to type Math.floor(Math.random..... I can't assign it to a variable and enter the variable because it generates a random number once and uses that number every time it encounters the variable. Is there a more efficient way to do this??

Cheers

Answer 1

You can use either OR or AND, they can be transformed from one to another with De Morgan's Laws.

dice1 != dice2 || dice2 != dice3

is equivalent to:

! (dice1 == dice2 && dice2 == dice3)

The first expression says "while the first two dice are not equal OR the second two dice are not equal" (i.e. one of the two equalities is false).

The second expressions says "while NOT (the first two dice are equal AND the second two dice are equal)" (i.e. one of the two equalities is false).

It's helpful to use a truth table for this kind of stuff, it can help you visualise the boolean combinations.

As for your side note, the random number generation, you're doing it the right way. You need to get a new number each time so you have to call Math.random() again each time.

You could extract that into a function so it's cleaner when you want to use it:

function generateRandom(diceSides) {
    return Math.floor(Math.random() * diceSides + 1);
}

and then use it like so:

var diceOne = generateRandom(diceSides);

Answer 2

Your understanding of the logical operators is correct, you're confused about how while works. When the condition is met it keeps looping, it stops when the condition fails.

So when only two of the dice are equal, one of the != conditions will be true, so the || condition is also true, so it continues to loop. When all three dice are equal, both != conditions will be false, and false || false is also false, so the loop stops.

Some languages have an until statement, which is like while but inverts the condition so that the loop stops when the condition is true. That would work the way you were describing.