Why does do-while not evaluate logical &&?

Question

Here is a simple code snippet where I am ensuring the user input is a number and is between 1-3

do{
var choice = parseInt(prompt("Please select one of the following:\n1.ROCK\n2.PAPER\n3.SCISSORS\n[NOTE: Choose your selection by pressing a number between 1,2 or 3.]"));
}while(isNaN(choice) && (choice === 1 || choice === 2 || choice === 3));

While debugging I see the debugger does not even evaluate the part after && where I am keeping a check on the input to be among 1, 2 or 3

Weirdly enough, the do-while construct works fine if I just have :

do{
var choice = parseInt(prompt("Please select one of the following:\n1.ROCK\n2.PAPER\n3.SCISSORS\n[NOTE: Choose your selection by pressing a number between 1,2 or 3.]"));
}while(isNaN(choice));

Can someone tell me what am I missing here or doing wrong?

Problem is `isNaN` will always be true it not a `NAN` .It should be `!isNaN(choice) && (choice === 1 || choice === 2 || choice === 3));` — DecPK, Jul 03 '21 at 11:49
And PS: here are some useful hints for creating a RPS game: https://stackoverflow.com/a/65222824/383904 and https://stackoverflow.com/a/53983473/383904 — Roko C. Buljan, Jul 03 '21 at 11:51
@RokoC.Buljan Appreciate it, I am more inclined in learning what i'm doing wrong here :) — CamelCaseDev, Jul 03 '21 at 11:52
@decpk The prompt disappers even when i enter a wrong input like a string data type — CamelCaseDev, Jul 03 '21 at 11:54

CherryDT · Accepted Answer · 2021-07-03T12:03:47.680

As your code looks now, you are looping as long as it's not a number and it's either 1, 2, or 3. Since those three are all valid numbers, the overall condition can never be true - if it's not a number then it won't be 1, 2 or 3, and if it's 1, 2 or 3 it won't be "not a number" (since it's a number).

From what you wrote, you want to keep looping if it's not a number or not one of those three:

do {
  var choice = parseInt(prompt("Please select one of the following:\n1.ROCK\n2.PAPER\n3.SCISSORS\n[NOTE: Choose your selection by pressing a number between 1,2 or 3.]"));
} while (isNaN(choice) || !(choice === 1 || choice === 2 || choice === 3));

(I changed && to || and added a ! before the second part of the condition.)

However, since you are limiting it to three exact options anyway, you don't even need to check for NaN anymore, because as mentioned before, if it's 1, 2 or 3 it means it's not NaN anyway:

do {
  var choice = parseInt(prompt("Please select one of the following:\n1.ROCK\n2.PAPER\n3.SCISSORS\n[NOTE: Choose your selection by pressing a number between 1,2 or 3.]"));
} while (!(choice === 1 || choice === 2 || choice === 3));

This becomes a bit easier to read by getting rid of the negation in the front, replacing === by !== and || by &&:

do {
  var choice = parseInt(prompt("Please select one of the following:\n1.ROCK\n2.PAPER\n3.SCISSORS\n[NOTE: Choose your selection by pressing a number between 1,2 or 3.]"));
} while (choice !== 1 && choice !== 2 && choice !== 3);

An alternative way to simplify the previous code is to create an array with valid values and loop as long as this array doesn't include the actual input number:

do {
  var choice = parseInt(prompt("Please select one of the following:\n1.ROCK\n2.PAPER\n3.SCISSORS\n[NOTE: Choose your selection by pressing a number between 1,2 or 3.]"));
} while (![1, 2, 3].includes(choice));

Wow, now I get what I was doing wrong exactly. I'll mark yours as an acceptable answer. Although others also helped me understand what I can do alternatively. Thank you sir — CamelCaseDev, Jul 03 '21 at 12:02

Soner from The Ottoman Empire · Answer 2 · 2021-07-03T12:00:26.117

1

Assume that when you prompt a non-nan value e.g. a number, isNaN evaluates false, thereby going into short-circuit evaluation. However, I think you want to accept one of 1,2, or 3 values. So shouldn't it be like !(choice === 1 || choice === 2 || choice === 3)? If one of them equals that value, no need to loop again.

edited Jul 03 '21 at 12:00

answered Jul 03 '21 at 11:52

Soner from The Ottoman Empire

18,731
3
79
101

So basically you're sugessting the do-while approach to validate the input is not the best way to approach this ? – CamelCaseDev Jul 03 '21 at 11:56
@CamelCaseDev no, I don't mean such that. You eventually come up with using a loop mechanism to reach a validate input. (no mention recursion). – Soner from The Ottoman Empire Jul 03 '21 at 11:58
This is what i have in my while condtion based on what you said and the prompt disappears even on an invalid input `while(!isNaN(choice) && !(choice ===1 || choice === 2 || choice === 3))` – CamelCaseDev Jul 03 '21 at 11:58
Just a gibberish string – CamelCaseDev Jul 03 '21 at 12:04
@CamelCaseDev no need to check then against `isNan` – Soner from The Ottoman Empire Jul 03 '21 at 12:06
Yeah you're right, thanks to this amazing thread I learned it the reason why as well. – CamelCaseDev Jul 03 '21 at 12:08

score 1 · Answer 3 · answered Jul 03 '21 at 11:54

When the first statement of the while loop is false the compiler doesnt compile the other statements after && here in this example (choice === 1 || choice === 2 || choice === 3) because it doesn`t matter what the other statements result is. The while loop is not executed at all.

This is compiler optimation (Short-circuit evaluation) for more information look at this article: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND

Sure, i'll check out the article. Thank you you've helped me learn what i did wrong. Upvoting your answer — CamelCaseDev, Jul 03 '21 at 12:04

KooiInc · Answer 4 · 2021-07-04T08:24:08.237

A less complicated approach (avoiding parseInt, isNaN and multiple boolean checks) may be (snippet for the whole game ;):

Play it here

document.querySelector('button')
  .addEventListener( 'click', () => location.reload() );

let choices = ['ROCK', 'PAPER', 'SCISSORS']
let choice = 0;

while ( !choices[+choice-1] ) {
  choice = prompt(
    `1. ROCK; 2. PAPER; 3. SCISSORS`, `Enter 1, 2 or 3`);
}

const values = {
  yours: choices[choice-1], 
  mine: choices[Math.floor(Math.random() * 3 )]};
const tie = values.yours === values.mine;
const iWin = values.yours === 'SCISSORS' && values.mine === 'ROCK' ||
  values.yours === 'ROCK' && values.mine === 'PAPER' ||
  values.yours === 'PAPER' && values.mine === 'SCISSORS';

console.log(`your choice: ${values.yours}, against: ${values.mine}. ${
  tie ? 'Tied...' : iWin ? 'You lost' : 'You win!'}` );

<button>Again...</button>

Thank you, it's another novel approach which I'll consider using in my javascript code. — CamelCaseDev, Jul 03 '21 at 12:26

Why does do-while not evaluate logical &&?

4 Answers4

Linked