Question 7 on the Number Guesser project

Hi,
I’m currently on Question 7 on the project, and I am trying to create a separate function to find the absolute value and distance between the human guess, the computer guess, and the target number. (I have already completed the base project successfully.)
Hi,
I’m currently on Question 7 on the project, and I am trying to create a separate function to find the absolute value and distance between the human guess, the computer guess, and the target number.
I have created two functions, one named getAbsoluteDistanceHuman, and another named getAbsoluteDistanceComputer. For both functions, I’ve used two parameters:

  • humanGuess and targetNumber for getAbsoluteDistanceHuman

  • computerGuess and targetNumber for getAbsoluteDistanceComputer.

For the first function, I created a constant variable, named humanDifference, where I used Math.abs to find the absolute difference between the humanGuess and targetNumber, and then I returned this variable. I done the same for the second function, but changed the function’s name to getAbsoluteDistanceComputer.

I created one last function, called compareGuesses, used the two constant variables and returned humanDifference <= computerDifference;, which will compare the two variables, using boolean rules.

However, the code doesn’t work when ran on the browser.
![image|690x450] (upload://4uLUT1Zrb51ReE5p63rval0gowt.png)
I am shown to have won the game when I was supposed to lose.

If you are able to review my code attached here on GitHub, that would be great:

I am more into what I should improve on in my code instead of just hearing what I have done wrong. Thank you.

Hey Frank,
would love to help you review your code, but you’ve accidentally uploaded the code from game.js instead of script.js to GitHub.

oh, dang it!
sorry, ill reupload it.

(Edit: You edited the gist on GitHub. Saw that via the Revisions tab. The box on this page didn’t refresh and hence didn’t reflect that change… Additionally I looked at it on my phone and the page rendered differently which should not surprise me by now. :smile: Thorough reading before posting is something I should work on. This edit doesn’t have anything in common with my original post.)

Your idea in general is correct. You wrote your helper functions and on their own they would be working, meaning that they return the value you want them to return, but they don’t get called in game.js. (Second (actually 3rd) edit: But maybe they could be called in a tweaked version of your compareGuesses(), wink wink nudge nudge )

In game.js only your compareGuesses() is called with three arguments passed into it (humanGuess, computerGuess and target). And since none of them is any of your getAbsoluteDistanceXxxx()s an erroneous result is what is to be expected because your function is defined to take 2 arguments and you expected a different input (the return of your 2 helper functions) than what it’s getting (3 numbers), when writing it.

Another point: If you define a function and tell it to take arguments, just because those arguments are named like the internal variables of other functions it doesn’t mean those variables will get used when the function is actually called. Arguments can be seen as pseudo-variables which you use in the function body, since you need to reference the actual values that get passed into your function by some name. And if you use a name that is already in use by a global variable, I would assume that chaos should ensue. Maybe any reader might enlighten both of us on that.

By internal I mean that the variables defined in getAbsoluteDistanceXxxx() are const and therefore block scoped, which means they can’t be called outside their block of code as enclosed by {} (here: their function).

I really hope that this somehow helped you understand why the code didn’t behave as expected.
(And to everyone - if any part of my explanation is wrong, PLEASE correct me - here to learn. :slightly_smiling_face:)

1 Like

Hi, @azraltar.
Thanks for the detailed explanation of the two programs. Your replies were very informative and helpful.
I have gone to take notes on the reply you have gave me, and it helped as I can summarise what I need to change in game.js and in script.js.

Here you mentioned how in game.js I needed to update the function compareGuesses(), from compareGuesses(currentHumanGuess, computerGuess, target) to compareGuesses(humanDifference, computerDifference.). I realise that I haven’t updated game.js after I changed the function in script.js. Thanks for pointing that out.

I presume you are talking about scope here. I have gone through the scope lesson on the JavaScript course yesterday, and it helped me understand the principles on block-scope, global-scope, pollution, and all that.

I think what you are trying to get across is to be careful of which variables you are calling in the program, and to watch out for global variables.

Your reply has really helped me understand why my code wasn’t behaving as expected. Thank you for that. I’ll keep you posted on anything else that I may have any trouble with.

In JS, variables declared in the parameter list of a function will shadow the global if the name is the same.

Could that be demonstrated in this piece of code here?

let number = 0

const numberIncrease = () => {
   number = 100;
}

console.log(number); //Should that log 100?

Yes, it should log 100 since it is not declared inside the function. It has access to the global.

1 Like

@mtf, or @azraltar (if you are here), would you mind checking my gist on GitHub? I done what @azraltar pointed out, which was to:

  • Call the helper functions getAbsoluteDistanceHuman and getAbsoluteDistanceComputer in game.js. I called them in the same block just before the program determines if the human won or the computer won. (line 28 and line 29, game.js)

  • I also changed the compareGuesses() function in game.js from 3 arguments to 2 argument, to match the function updated in script.js (line 32, game.js)

However, when run on the browser, the target number generates, the computer guess generates, and I think the human guess is also submitted, but the winner was never picked and you are unable to advance rounds.

Thank you.

Those functions were never called for. The function we are asked to write is meant to be in the script.js file, not the game.js file. It is to be one function for both purposes.

Its question 7 on the number guesser challenge project, which is an extension question. I have completed the project, but I am stuck on the extension question.

You probably calculated the distance from the computer guess to the target and from the human guess to the target. Move this into a separate getAbsoluteDistance() function that takes two numbers and returns the distance, and then use that inside your compareGuesses() function.

Notice it only asks for the one function? Then when comparing the guesses we will make two calls, one with human, target, and one with computer, target. We compare the two return values.

Is it possible to use two return keywords, returning two values for each one? Or do I rewrite the functions, creating a lone function, and use one return keyword and giving two values?

… and make two calls.

1 Like

Ohh yes. I remember now. Ill try it and I’ll get back to you if I have any issues.

1 Like
const humanDifference = Math.abs(targetNumber - humanGuess);
const computerDifference = Math.abs(targetNumber - computerGuess);

const getAbsoluteDistance = (humanGuess, computerGuess, targetNumber) => {
  if (humanGuess, targetNumber) {
    return humanDifference;
  } else if (computerGuess, targetNumber) {
    return computerDifference;
  };
};

Will this work as an function?

In the arguments we are using humanGuess, computerGuess, and targetNumber.

The conditional is used so that if, for example humanGuess and targetNumber are truthy (because the unused argument wouldn’t be used, so its falsy), it’ll declare a new variable called humanDifference which will work out the absolute value of targetNumber minus humanGuess.

It will do the same for the else-if conditional, where computerGuess and targetNumber are used, so they are truthy, and humanGuess is not used, so its falsy.

I’ve made changes in game.js to suit the change.

EDIT: realized that humanDifference and computerDifference are in block scope, which would probably stop it from being called, so I took it into global scope.

Perhaps, although it is not what the exercise is looking for. We want a simple, reusable utility function that takes only two arguments, a value and a target.

Eg.

const gad = (value, target) => Math.abs(value - target)
1 Like

Thanks! I’ll redo it later

1 Like

I’ve kind of given up on the extended questions. I reverted the file back to my original code. I think that I might come back to this some time later when I am more experienced in JavaScript.
The original code, which doesn’t include any extension codes for the extension questions, is correct, so I’m happy about that.
Thanks for your help, I appreciate it.

1 Like