How to change value of outer variable using a inner function?

Question

In following code, the outer variables playerScore and computerScore are not updated when I use the function calcScore? How do I update it, using a function? From what I understand, it is possible to change the value of the outer variable from an inner scope, but why does it not work here?

    <script>
        function playRound(playerSelection, computerSelection) {
            playerSelection = playerSelection.toLowerCase();
            computerSelection = computerSelection.toLowerCase();
            if (playerSelection === computerSelection) {
                return "draw";
            }
            else if (playerSelection === "rock"){
                if (computerSelection === "scissors") return "win";
                else if (computerSelection === "paper") return "lose";
            }
            else if (playerSelection === "paper"){
                if (computerSelection === "scissors") return "lose";
                else if (computerSelection === "rock") return "win";
            }
            else if (playerSelection === "scissors"){
                if (computerSelection === "rock") return "lose";
                else if (computerSelection === "paper") return "win";
            }
        }
        
        function computerSelection() {
            let selection = ["rock", "paper", "scissors"];
            return selection[Math.floor(Math.random() * selection.length)];
        }
        function calcScore(result, playerScore, computerScore) {
            if (result === "win") {
                playerScore += 1;
                console.log("win");
            }
            else if (result === "lose") {
                computerScore += 1;
                console.log("lose");
            }
            else if (result === "draw") {
                playerScore += 1;
                computerScore += 1;
            }
        }
        function game() {
            let playerScore = 0;
            let computerScore = 0;
            for (let i = 1; i <= 5; i++) {
                let result = playRound(prompt("Select rock, paper, or scissors!"), computerSelection());
                calcScore(result, playerScore, computerScore);
                console.log(`You have ${playerScore} points! Computer has ${computerScore} points!`);
            }
            playerScore, computerScore = 0, 0;
        }
    </script>

dwosk · Accepted Answer · 2020-10-05 04:02:15Z

Javascript doesn't pass variables by reference - so any modifications you do to playerScore and computerScore within calcScore() are only local to that function.

What you can do is make playerScore and computerScore global variables. That way any modifications will be in the global scope. Alternatively, you could have calcScore() return the modified values.

Using the global method:

    <script>
        let playerScore = 0;
        let computerScore = 0;

        function playRound(playerSelection, computerSelection) {
            playerSelection = playerSelection.toLowerCase();
            computerSelection = computerSelection.toLowerCase();
            if (playerSelection === computerSelection) {
                return "draw";
            }
            else if (playerSelection === "rock"){
                if (computerSelection === "scissors") return "win";
                else if (computerSelection === "paper") return "lose";
            }
            else if (playerSelection === "paper"){
                if (computerSelection === "scissors") return "lose";
                else if (computerSelection === "rock") return "win";
            }
            else if (playerSelection === "scissors"){
                if (computerSelection === "rock") return "lose";
                else if (computerSelection === "paper") return "win";
            }
        }
        
        function computerSelection() {
            let selection = ["rock", "paper", "scissors"];
            return selection[Math.floor(Math.random() * selection.length)];
        }
        function calcScore(result) {
            if (result === "win") {
                playerScore += 1;
                console.log("win");
            }
            else if (result === "lose") {
                computerScore += 1;
                console.log("lose");
            }
            else if (result === "draw") {
                playerScore += 1;
                computerScore += 1;
            }
        }
        function game() {

            for (let i = 1; i <= 5; i++) {
                let result = playRound(prompt("Select rock, paper, or scissors!"), computerSelection());
                calcScore(result);
                console.log(`You have ${playerScore} points! Computer has ${computerScore} points!`);
            }
            playerScore, computerScore = 0, 0;
        }
    </script>

Alternative method:

    <script>
        function playRound(playerSelection, computerSelection) {
            playerSelection = playerSelection.toLowerCase();
            computerSelection = computerSelection.toLowerCase();
            if (playerSelection === computerSelection) {
                return "draw";
            }
            else if (playerSelection === "rock"){
                if (computerSelection === "scissors") return "win";
                else if (computerSelection === "paper") return "lose";
            }
            else if (playerSelection === "paper"){
                if (computerSelection === "scissors") return "lose";
                else if (computerSelection === "rock") return "win";
            }
            else if (playerSelection === "scissors"){
                if (computerSelection === "rock") return "lose";
                else if (computerSelection === "paper") return "win";
            }
        }
        
        function computerSelection() {
            let selection = ["rock", "paper", "scissors"];
            return selection[Math.floor(Math.random() * selection.length)];
        }
        function calcScore(result, playerScore, computerScore) {
            if (result === "win") {
                playerScore += 1;
                console.log("win");
            }
            else if (result === "lose") {
                computerScore += 1;
                console.log("lose");
            }
            else if (result === "draw") {
                playerScore += 1;
                computerScore += 1;
            }

            return [playerScore, computerScore];
        }
        function game() {
            let playerScore = 0;
            let computerScore = 0;
            for (let i = 1; i <= 5; i++) {
                let result = playRound(prompt("Select rock, paper, or scissors!"), computerSelection());
                let scores = calcScore(result, playerScore, computerScore);
                playerScore += scores[0];
                computerScore += scores[1]; 
                console.log(`You have ${playerScore} points! Computer has ${computerScore} points!`);
            }
            playerScore, computerScore = 0, 0;
        }
    </script>

kanaria · Accepted Answer · 2020-10-05 03:37:28Z

0

your defining both of those variables twice so now im confused. do you want to be abled to reuse those variables in the game function without re defining them? because if thats the case then they should be global variables instead of function parameters(you wont be able to use those defined in the function parameter outside of that function).

answered Oct 5, 2020 at 3:37

kanaria

439 bronze badges

2 Comments

J. Wilshere Over a year ago

oh I wanted to reset the points whenever a round of 5 is completed

kanaria Over a year ago

oh that makes sense sorry.

Collectives™ on Stack Overflow

How to change value of outer variable using a inner function?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related