Nested If vs && Operator on rock-paper-scissors project

I was doing the Rock Paper Scissors project using nested if on the determineWinner function.
And then I’m wondering if I could change the nested if into && operator.

for userChoice ‘rock’ vs any computerChoice, everything is fine, but once I change the userChoice into ‘paper’ and computerChoice is ‘scissor’, it says I won, while it should be computer that won

&& operator code:

const getUserChoice = userInput => {
userInput = userInput.toLowerCase();
if (userInput === ‘rock’ || userInput === ‘paper’ || userInput === ‘scissors’) {
return userInput;
} else {
console.log(‘Error!’);
}
};

const getComputerChoice = () => {
const randomNumber = Math.floor(Math.random() * 3);
switch (randomNumber) {
case 0:
return ‘rock’;
case 1:
return ‘paper’;
case 2:
return ‘scissors’
}
};

const determineWinner = (userChoice, computerChoice) => {
if (userChoice === computerChoice) {
return ‘The game is a tie!’;
}
if (userChoice === ‘rock’ && computerChoice === ‘paper’) {
return ‘Sorry, computer won!’;
} else {
return ‘Congratulations, you won!’;
}
if (userChoice === ‘paper’ && computerChoice === ‘scissors’) {
return ‘Sorry, computer won!’;
} else {
return ‘Congratulations, you won!’;
}
if (userChoice === ‘scissors’ && computerChoice === ‘rock’) {
return ‘Sorry, computer won!’;
} else {
return ‘Congratulations, you won!’;
}
};

const playGame = () => {
const userChoice = getUserChoice(‘paper’);
const computerChoice = getComputerChoice();
console.log(You threw ${userChoice});
console.log(Computer threw ${computerChoice});
console.log(determineWinner(userChoice, computerChoice));
};

playGame();

Nested if code:

const getUserChoice = userInput => {
userInput = userInput.toLowerCase();
if (userInput === ‘rock’ || userInput === ‘paper’ || userInput === ‘scissors’) {
return userInput;
} else {
console.log(‘Error!’);
}
};

const getComputerChoice = () => {
const randomNumber = Math.floor(Math.random() * 3);
switch (randomNumber) {
case 0:
return ‘rock’;
case 1:
return ‘paper’;
case 2:
return ‘scissors’
}
};

const determineWinner = (userChoice, computerChoice) => {
if (userChoice === computerChoice) {
return ‘The game is a tie!’;
}
if (userChoice === ‘rock’)
if (computerChoice === ‘paper’) {
return ‘Sorry, computer won!’;
} else {
return ‘Congratulations, you won!’;
}
if (userChoice === ‘paper’)
if (computerChoice === ‘scissors’) {
return ‘Sorry, computer won!’;
} else {
return ‘Congratulations, you won!’;
}
if (userChoice === ‘scissors’)
if (computerChoice === ‘rock’) {
return ‘Sorry, computer won!’;
} else {
return ‘Congratulations, you won!’;
}
};

const playGame = () => {
const userChoice = getUserChoice(‘paper’);
const computerChoice = getComputerChoice();
console.log(You threw ${userChoice});
console.log(Computer threw ${computerChoice});
console.log(determineWinner(userChoice, computerChoice));
};

playGame();

Can someone explain to my what is the difference between nested if and && operator? isn’t it should be the same? why && operator not working while nested if working?

Thanks!

Hi there and welcome to the forums!

The problem with translating between conditional operators and nested if statements is that you need to rethink the flow of the code. In the nested if we have this:

if (userChoice === 'rock') {
    if (computerChoice === 'paper') {
        return ‘Sorry, computer won!’;
    } else {
        return ‘Congratulations, you won!’;
    }
}

Here you check if the userChoice is ‘rock’. If that’s the case then it carries out the next steps of the operation. However when it’s not ‘rock’ it just skips that code and goes to the next section. Now lets check the equivalent in your modified code.

if (userChoice === ‘rock’ && computerChoice === ‘paper’) {
    return ‘Sorry, computer won!’;
} else {
    return ‘Congratulations, you won!’;
}

What is this doing? Well, when userChoice is ‘rock’, it then checks if computerChoice is ‘paper’. If it is, then the computer wins, else you win. That’s all fine, but what about when userChoice isn’t ‘rock’? Well, then the if statement is shown as false, and so it takes the else conditional instead, resulting in it being shown that you won! In fact, your code can never get past this block as it returns from the function regardless of what the result is. This is highlighted nicely when you use an IDE like VSCode, where the greyed out code can never be reached.
image

I’ll leave it to you to come up with a solution to this issue as it’s a good exercise to do. Refactoring code is important and learning the subtle differences and how to restructure your code in situations like this is important.

2 Likes

Ahh yess, now I get it, if one of the statement in && operator false, the expression become falsy value, hence the code straight to the else statement right?

Thank you for the explanation @adamgaffney96!

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.