Store value in a variable

Question

I am new in Javascript. I develop a program that store the score of humun and computer guess number. I want the human score and computer score will update when I call the updateScore() functions. However, it works but the score unable to increase by last score.

Here is the code:

let humanScore = 0;
    let computerScore = 0;
    let currentRoundNumber = 1;
    
    // Write your code below:
    
    const generateTarget = () => {
      return Math.floor(Math.random()*10);
    };
    
    const compareGuesses = () => {
    // Humun & Computer guess a number
      const humunGuess = 1;
      const computerGuess = 2;
    // Call the generateTarget functions
      const secretTargetNumber = generateTarget();
    // Compare the difference between Target number and humun guess number
      const humunTarget = Math.abs(humunGuess - secretTargetNumber);
    // Compare the difference between Target number and computer guess number
      const computerTarget = Math.abs(computerGuess - secretTargetNumber);
    // Return true if humun won, false if computer won
      if (humunTarget < computerTarget || humunTarget == computerTarget) {
        return true;
      }
      else {
        return false;
      }
    };
    
    
    let updateScore = () => {
      switch (compareGuesses()) {
        case true:
        return humanScore+=1;
        case false:
        computerScore+=1;
      }
    };
    
    updateScore()
    console.log(humanScore)
    console.log(computerScore)

Answer 1

Because you're new, and I think @Onur Özkır is on to something, I will give some guidelines instead.

1. I understand that you mostly trying out to see if things works, and will refactor afterwards, but I recommend that you create methods that does only one thing. You already done that with generateTarget(), but if I look at compareGuesses(), that method doesn't just compare guesses. It also reads and generates numbers. I would instead read the values in updateScore() and then add them as parameters in compareGuesses.

By restricting your methods to only do one thing will make your code more readable, your methods will be smaller so they are easier to grasp, and the code is easier to debug.

2. I would also like to suggest that you only return a value at the end of the method, and always return (unless you can fit everything on one row) using a variable.

3. I also don't like switches in javascript, because the forced use of return. Would rather use ifs statement or a shorthand if statements, using conditional/ternary operator.

4. Use method names and variables to explain the code (ex. the constant HUMAN_WON in the code below). Try to avoid comments as far as possible. Comments should, IMHO, only be used if you generate a documentation. I suggest that you get your hands on Clean Code, which was a revelation for me to read, even as an experienced programmer.

I will refactor your code as a suggestion of how it can look like:

let humanScore = 0;
let computerScore = 0;
let currentRoundNumber = 1;
const HUMAN_WON = 1, COMPUTER_WON = -1, EQUAL = 0;

const generateTarget = () => {
  return Math.floor(Math.random() * 10);
};

const readHumanGuess = () => {
  return 1; // replace with appropriate code
}

const generateComputerGuess = () => {
  return 2; // replace with generateTarget();
}

const compareGuesses = (humanGuess, computerGuess, secretTargetNumber) => {
  let result = EQUAL;
  const humanTarget = Math.abs(humanGuess - secretTargetNumber);
  const computerTarget = Math.abs(computerGuess - secretTargetNumber);

  if (humanTarget < computerTarget) {
    result = HUMAN_WON;
  } else if (computerTarget < humanTarget) {
    result = COMPUTER_WON;
  }
  
  return result;
};

let updateScore = () => {
  let humanGuess = readHumanGuess();
  let computerGuess = generateComputerGuess();
  let secretTargetNumber = generateTarget();
  
  let whoWon = compareGuesses(humanGuess, computerGuess, secretTargetNumber);

  if (whoWon == HUMAN_WON) {
    humanScore++;
  } else if (whoWon == COMPUTER_WON) {
    computerScore++;
  }
};

let displayCurrentScore = () => {
  updateScore();
  console.log(`${humanScore} vs ${computerScore}`);
}

<input type="button" onclick="displayCurrentScore()" value="Display Score">

You can even go one step further refactoring readGuesses() from updateScore() and separate updating UI—displayCurrentScore()—from handling logic in updateScore().

let humanScore = 0;
let computerScore = 0;
let currentRoundNumber = 1;
const HUMAN_WON = 1, COMPUTER_WON = -1, EQUAL = 0;

const generateTarget = () => {
  return Math.floor(Math.random() * 10);
};

const readHumanGuess = () => {
  return 1; // replace with appropriate code
}

const generateComputerGuess = () => {
  return 2; // replace with generateTarget();
}

const readGuesses = () => {
  let humanGuess = readHumanGuess();
  let computerGuess = generateComputerGuess();
  let secretTargetNumber = generateTarget();
  
  return [humanGuess, computerGuess, secretTargetNumber];  // returning array
}

const compareGuesses = (humanGuess, computerGuess, secretTargetNumber) => {
  let result = EQUAL;
  const humanTarget = Math.abs(humanGuess - secretTargetNumber);
  const computerTarget = Math.abs(computerGuess - secretTargetNumber);

  if (humanTarget < computerTarget) {
    result = HUMAN_WON;
  } else if (computerTarget < humanTarget) {
    result = COMPUTER_WON;
  }
  
  return result;
};

let updateScore = (humanGuess, computerGuess, secretTargetNumber) => {
  let whoWon = compareGuesses(humanGuess, computerGuess, secretTargetNumber);

  if (whoWon == HUMAN_WON) {
    humanScore++;
  } else if (whoWon == COMPUTER_WON) {
    computerScore++;
  }
  
  return {'human': humanScore, 'computer': computerScore};
};

let displayCurrentScore = () => {
  let [humanGuess, computerGuess, secretTargetNumber] = readGuesses();
  let score = updateScore(humanGuess, computerGuess, secretTargetNumber);
  
  console.log(`${score.human} vs ${score.computer}`);
}

<input type="button" onclick="displayCurrentScore()" value="Display Score">

Answer 2

It is a programming language based on javascript event/trigger features. all variables are reset when you call the file again.

The variables seem to be reset every time you call the javascript file

let humanScore = 0,
  computerScore = 0,
  currentRoundNumber = 1;

// Write your code below:

const generateTarget = () => {
  return Math.floor(Math.random() * 10);
};

const compareGuesses = () => {
  // Humun & Computer guess a number
  const humanGuess = 1;
  const computerGuess = 2;
  // Call the generateTarget functions
  const secretTargetNumber = generateTarget();
  // Compare the difference between Target number and humun guess number
  const humanTarget = Math.abs(humanGuess - secretTargetNumber);
  // Compare the difference between Target number and computer guess number
  const computerTarget = Math.abs(computerGuess - secretTargetNumber);
  // Return true if humun won, false if computer won
  if (humanTarget < computerTarget) {
    return true;
  } else {
    return false;
  }
};


let updateScore = () => {
  switch (compareGuesses()) {
    case true:
      return humanScore += 1;
    case false:
      computerScore += 1;
  }
};

let showScore = () => {
  updateScore();

  console.log(humanScore)
  console.log(computerScore)
}

<button onclick="showScore()">Click</button>

Woking Demo : https://jsfiddle.net/6v25y9qd/

Push click and show console