[Rock, Paper, Scissors Exercise] - Getting the right result, but also a weird Undefined!

[byteninja24722]

Hey everyone!

Brand new to all of this, thank you for being there to help newbies like me out. So far I’m really enjoying it, and I’ve decided to start my coding journey with JavaScript.

I really enjoyed working through theRock, Paper, Scissors exercise, but I’m now getting a strange undefined error right under my result when I try to log the playGame function.

Based on my own investigating, Undefined seems to show up when there’s something in the code that’s not really needed. I tried isolating and logging each function to see which was generating the undefined, but everything seems to be fine right up until the very end when the playGame function is run, resulting in the undefined. Here’s my code:

const getUserChoice = userInput => {
  userInput = userInput.toLowerCase();
  if(userInput === 'rock' || userInput === 'paper' || userInput === 'scissors') {
    return userInput;
  } else {
    console.log('Please enter a valid input');
  }
}

function getComputerChoice() {
  let randomNumber = Math.floor(Math.random() * 3)
  switch (randomNumber) {
    case 0:
      return 'rock';
      break;
    case 1:
      return 'paper';
      break;
    case 2:
      return 'scissors';
      break;
  }
}

function determineWinner(userChoice, computerChoice) {
  if (userChoice == computerChoice) {
    return 'Tied game, play again!'
  } else if (userChoice == 'rock' && computerChoice == 'paper') {
    return 'The computer won, play again!'
  } else if (userChoice == 'paper' && computerChoice == 'scissors') {
    return 'The computer won, play again!'
  } else if (userChoice == 'scissors' && computerChoice == 'rock') {
    return 'The computer won, play again!'
  } else {
    return 'The user won, congrats!'
  }
}

let userChoice = getUserChoice('RoCk');
let computerChoice = getComputerChoice();

function playGame(userChoice, computerChoice) {
   console.log(`User played ${userChoice} and the computer played ${computerChoice}!`);
  
  console.log(determineWinner(userChoice, computerChoice));
}

console.log(playGame(userChoice, computerChoice));

Thanks again!!

[ionatan]

Undefined seems to show up when there’s something in the code that’s not really needed.

If only. It’s the other way around. It’s when you need (ask for) something that isn’t there.

I’ve decided to start my coding journey with JavaScript

And this is definitely a drawback with javascript, it behaves weirdly and it does so silently so that you don’t notice. If you don’t specifically need javascript, picking something else (like python) may be a good idea as it would let you lean a bit more on the language for sanity checking your program. But then again, it’s not a deal breaker so if you do need js or like it or whatever reason, then it’s fine and some discipline and control (as in: know what you’re writing and be willing to dig into things) will help you around most issues.

everything seems to be fine right up until the very end

quite often debugging is something you’d do backwards, working your way back from the problem. so you might start by verifying that you really really do have an undefined there, and then look at where you got it from, repeat until the specific operation producing it is found

[ionatan]

A few other things:

      return 'rock';
      break;

Putting code after a return statement will not do anything

;

sometimes you use semi-colons, sometimes not. pick one, and do that everywhere. omitting them is easier since it doesn’t require knowing where they go.

    case 0:
      return 'rock';
      break;
    case 1:
      return 'paper';
      break;
    case 2:
      return 'scissors';
      break;

You CAN use a switch for that, but you could also put those values in an array. A regular object can also serve as dispatch on value for when keys aren’t counting up from 0

[byteninja24722]

Thank you for the tips and the insight! Still not sure if I picked the right language, but I do enjoy digging deep into something to try to understand how/why it’s working or not working. I might enjoy the debugging aspect of the JS craziness.

Haven’t learned arrays yet, but looking forward to it!

[web9020947765]

After a few trial and error , I figured out how to fix your code but I’m not sure why. The explanation is my opinion , so hope someone can provide a correct explanation.

1. `let userChoice = getUserChoice(‘RoCk’);
   let computerChoice = getComputerChoice();

function playGame(userChoice,computerChoice) { }`

Since you define userChoice & computerChoice outside of your function,
then you declare the function playGame(userChoice,computerChoice) with parameters userChoice & computerChoice. You may have thought that you wouldn’t need to define what userChoice and computerChoice again within the function. However, the userChoice & computerChoice that you defined as variables have nothing to do with the userChoice & computerChoice as parameters of the function. So in order for the function to work, you either do on the following:

a. Define userChoice & computerChoice again within your function:

let userChoice = getUserChoice(‘RoCk’);
let computerChoice = getComputerChoice();

function playGame(userChoice,computerChoice) {
userChoice = getUserChoice(‘RoCk’);
computerChoice = getComputerChoice();

userChoice = getUserChoice(‘RoCk’);
computerChoice = getComputerChoice();
console.log(User played ${userChoice} and the computer played ${computerChoice}!);

console.log(determineWinner(userChoice, computerChoice));
}

b. You don’t have to declare userChoice & computerChoice as parameters again since you already defined them outside the function. So just delete them.

let userChoice = getUserChoice(‘RoCk’);
let computerChoice = getComputerChoice();

function playGame() {

console.log(User played ${userChoice} and the computer played ${computerChoice}!);

console.log(determineWinner(userChoice, computerChoice));
}

c. Declare and define them normally as taught in the lesson in 2 ways:
`
function playGame() {
let userChoice = getUserChoice(‘RoCk’);
let computerChoice = getComputerChoice();

console.log(User played ${userChoice} and the computer played ${computerChoice}!);

console.log(determineWinner(userChoice, computerChoice));
}
`

or as belows (because you already declared userChoice & computerChoice as parameters, you do not need to use ‘let’ to declare again)

function playGame(userChoice,computerChoice) {
userChoice = getUserChoice(‘RoCk’);
computerChoice = getComputerChoice();
console.log(User played ${userChoice} and the computer played ${computerChoice}!);

console.log(determineWinner(userChoice, computerChoice));
}

2. When you call the function playGame(), the console.log method is already included in it. So if you remove console.log and write it like this playGame();, the undefined error will disappear.

When you call the function playGame(); for eg: ‘Tied game, play again!’ is returned and logged to the console. So when you add console.log again as in console.log(playGame()); no value is returned, thus ‘undefined’ is displayed.

[janneslohmeijer]

You are getting an undefined because you are logging a function call that does not return anything.

console.log(playGame(userChoice, computerChoice));

either solely do the function call:

playGame(userChoice, computerChoice); 
// The result is printed anyways because you do already log the results inside playGame 

or make sure playGame returns anything

function playGame(userChoice, computerChoice) {
  return `User played ${userChoice} and the computer played ${computerChoice}!`;
  return determineWinner(userChoice, computerChoice);
}

[byteninja24722]

This was it, and it makes total sense!! Thank you so much, I really appreciate the help.