Rock paper scissors: multiple questions

I am only at step 6 yet and this is the first project that I am really struggling on. There are (multiple things) I don’t understand so far, and there are still 8 steps to go. Can someone help me explain these things please?

Step one says

Using const and arrow function syntax, create a function named getUserChoice that takes a single parameter userInput .

const getUserChoice = userInput => {
userInput = userInput.toLowerCase();
if (userInput === 'rock' || 'paper' || 'scissors') {return userInput;}
else {console.log('Error no rock paper scissors chosen');}
}

I got this code, at first I did use multiple else if statements which also worked but after seeing the first part of the video I shortened it but I did need the hint to make it work in the first try. How do you know you need to create a constant variable and format it this way? What is the logic behind it? I know you can assign functions to variables (function expressions and also checked out w3schools. There the example they give is

var text = "The temperature is " + toCelsius(77) + " Celsius";

so it looks like const, or var is that case, variableName = ‘value including functionName(parameter)’;

but in the rock paper scissors exercise it looks like const variableName = singleParameter => {block statement} while the exercise says you need to declare a function called getUserChoice, but in the solution code (youtube) it uses getUserChoice as a variable name with an unnamed function (function expression) and userInput as a parameter. I can look up all the aswers in the video, but I don’t understand the logic behind it. Can someone please explain the how and why you should know you should do it this way? Step 5 is the same, they tell you to create a function, not assign a function to a const / variables value.

Another problem I am having with step five is that I am wondering why this code (my initial code) isn’t working with the else if statements? I tried it without the else at the end, and with a console.log() within the {} but it all gives an error.

const getComputerChoice = () => {

  const randomNumber = Math.floor(Math.random() * 3);

if (randomNumber === 0) {return 'rock';}

else if (randomNumber === 1) 

{return 'paper';}

else if (randomNumber === 2) return 'scissors';}

else {}
}

Now I’ve got this instead:

const getComputerChoice = () => {

  const randomNumber = Math.floor(Math.random() * 3);

switch (randomNumber) {

case 0: return 'rock';

break;

case 1: return 'paper'

break;

case 2: return 'scissors'

break;} 

}

The video solution is the same, but it doesn’t include the breaks. If a break means the code after it doesn’t have to run anymore because there is a match with the random number, why should you exclude the break? When you exclude it and your random number appears to mean rock, the rest of the block statements (cases) still run w/o having to. Does it matter if you include/exclude it in this case?

1 Like

Because the return statements end the function, and therefore the switch…case statements.

As far as I know, it is personal preference. If you could have done it by using the function declaration syntax, then that’s fine as well:

function getUserChoice(parameter) {
//code
}
1 Like

There are multiple ways to declare a function. The directions say “Using const and arrow function syntax…” so that is why they are declaring it like:

const getUserChoice = userInput => { block }

whether you wrote it as an arrow function or the classic…

function getUserChoice(userInput) { block }

both are called the same way:
getUserFunction(“rock”);

Here is a link to the codecademy function cheatsheet where they go over the different way to declare a function. I believe they are pushing the arrow function because it is new in ES6. Seems like the reasons to use the different methods matter at an advanced level (?)

https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-functions/cheatsheet

1 Like

I suppose. Maybe it’s just that they are easier and cleaner to write out and read?

This article on function declaration vs function expressions made a lot more sense after I completed the iterators section of codecademy!

2 Likes

Hey Ryan, thankyou for your comments! I was still confused because next excercises also asked to ‘declare a function’ instead of an anonymous function / function expression. I also found the link you shared which helped a bit. I hope that when I’ll get to the iterations section myself things will fall into place more here too. From what I’m getting now const variableName = (parameters) => {} is the newest way in E6 to declare functions and the function isn’t usable outside the expression, so I’ll just stick to that until the iterations lesson.

1 Like

I’m not so sure that is true, you are just defining and naming the function in a different way and there are slightly different behaviors depending on how you define it, as the article points out.

Instead of looking at it like:

const variableName = (parameters) => {} 

Maybe it will help to look at it like this:

const functionName = (parameters) => {} 

and here is a declared function:

function functionName(parameters) {}
1 Like