Rock, Paper, Scissors Game - userChoice not defined, but it is defined...I think?

Question

When I execute playGame(); I want to show this: You have chosen ${userChoice) and the computer has chosen ${computerChoice}. The winner is ${determineWinner}. Based on my understanding, the userchoice is defined at the top of my code, and the computerChoice is defined in the computerChoice-section. So I don't understand. Thanks for the help.

Instead I just get an error saying: ReferenceError: userChoice is not defined at playGame.

FIXED: This is what I did, not sure how or why it works though:

function playGame(){
  userChoice = "rock";
  computerChoice = getComputerChoice();
  console.log(`The user chose ${userChoice}. The computer chose ${computerChoice}. ${determineWinner(userChoice,computerChoice)}`)
}
playGame();

---

//We're taking the userInput and converting it to lowercase letters and storing it within userChoice
    function getUserChoice(userInput){
      let userChoice = userInput.toLowerCase();
        if(userChoice === "rock" || userChoice === "paper" || userChoice === "scissors"){return userChoice;}
        else{return "That hand doesn't exist.";}
    }

    //We're making a number and converting it to an eqvivalent string
    function getComputerChoice(){
      let computerChoice = Math.floor(Math.random()*3);
        if(computerChoice === 0){return "rock";}
        else if(computerChoice === 1){return "scissors";}
        else if(computerChoice === 2){return "paper";}
            else{return "Input not valid.";}
    }

    //Determining the winner based upon the input and the computer's choice
    function determineWinner(userChoice, computerChoice){
        //Having a tie
        if (userChoice === computerChoice){return "It's a tie!";}
        //If the user types in scissors
      else if(userChoice === "scissors"){
        if(computerChoice === "rock"){return "Computer wins! Rock kills scissors.";}
        else if(computerChoice ==="paper"){return "User wins! Scissors kill paper.";}
      }
        //If the user types in paper
      else if(userChoice === "paper"){
        if(computerChoice === "rock"){return "User wins! Paper kills rock.";}
        else if(computerChoice === "scissors"){return "Computer wins! Scissors kill paper.";}
      }
        //If the user types in rock
      else if(userChoice === "rock"){
        if(computerChoice === "paper"){return "Computer wins! Paper kills rock.";}
        else if(computerChoice === "scissors"){return "User wins! Rock kills scissors."};
      }
    }

    //Function that embodies the other functions and executes the game.
    function playGame(){
      console.log(`You chose ${userChoice}`);
    }
    playGame();

Answer 1

Variables are scoped to the block in which they are defined (or the function in which they're defined in the case of var). So the userChoice in the following code is only in scope inside of getUserChoice:

function getUserChoice(userInput){
  let userChoice = userInput.toLowerCase();
    if(userChoice === "rock" || userChoice === "paper" || userChoice === "scissors"){return userChoice;}
    else{return "That hand doesn't exist.";}
}

Similarly, the userChoice variable in the argument list of determineWinner is only in scope for determineWinner.

In playGame, there is no variable named userChoice which is in scope, hence the error.

Answer 2

Your variable userChoice is not defined in the context of the function playGame, which is why you're seeing the reference error:

function playGame() {
  console.log(`You chose ${userChoice}`); // this is not defined
}

playGame();