My functions never work. I don't understand the "data-flow" of variables, return and console.log

This is a general question, but I’ll try to provide examples.

My functions never work. I’m currently working on Paper Rock Scissors, but it’s always the same. I try to console.log my first step and usually get errors. I suspect it has to do with how and where I declare a variable and use methods, return, console.log. In the example, I would comment out all of the other console.log’s when trying a new one. What is my main misconception concerning data-flow?

[codebyte language=javascript]
// The player makes their choice:

let playerChoice = “Paper”

// Now we format to all lower case.

const = formatChoice = (playerChoice) => {
playerChoice = playerChoice.toLowerCase();
return playerChoice
}

// Here we check to see if the function is working so far.

console.log(playerChoice);

//That didn’t work, let’s try something else.

console.log(formatChoice());

// Maybe this?

console.log(formatChoice(“Paper”))

// Nope. What about this?

console.log(formatChoice(playerChoice));

// Nope.

[codebyte]

2 Likes

Actually, I think the data flow is not your issue. Converting the string to lowercase is the problem. The correct method is toLowerCase().

1 Like

Thanks for catching that. Unfortunately, none of the attempts to console.log worked after the correction. See any other possibilities?

1 Like

In fact, even just this gives me an error:

let playerChoice = “Paper”

const = formatChoice = (playerChoice) => {
playerChoice = playerChoice.toLowerCase();
return playerChoice
}

1 Like
let playerChoice = “Paper”

const = formatChoice = (playerChoice) => {
playerChoice = playerChoice.toLowerCase();
return playerChoice
}

Ah yes, you have an extra = in your function definition.

2 Likes

Awesome. Now, another question.
This works:
const formatChoice = (playerChoice) => {
playerChoice = playerChoice.toLowerCase();
return playerChoice
}
console.log(formatChoice(“Paper”));

But this does not:
let playerChoice = “Paper”
const formatChoice = (playerChoice) => {
playerChoice = playerChoice.toLowerCase();
return playerChoice
}
console.log(formatChoice());

Can a function not take in a variable as a parameter?

1 Like

The second code will work if:

console.log(formatChoice()); // won't work because no argument has been provided
console.log(formatChoice(playerChoice)); // will work because a string has been 
                                        // provided as the argument

Note that the variable you declared let playerChoice = "Paper" is not the same as the parameter playerChoice of the function formatChoice. Even though the name is the same, the parameter playerChoice is limited to the function. The parameter can’t be accessed outside the function. Perhaps this post will help in understanding the relationship between parameters and arguments (even though the post is about C#, the same logic holds for JavaScript. Instead of the word ‘method’, just substitute the word ‘function’ in the post). If there is still some confusion, share your thoughts on what you find troubling.

1 Like

Thank you for your help.

So let me restate this to make sure I understand.
A function can use a variable of the same data type as a parameter, as long as it is defined before the function.
Anything you do to that parameter doesn’t affect the variable, just the parameter.

Does that sound accurate? I’ve rewritten the function like this for clarity.

let playerChoice = “Paper”;

const formatChoice = (param) => {
param = param.toLowerCase();
return param;
};

console.log(formatChoice(playerChoice));

1 Like

The code you have written above will work.

THIS WILL ALSO WORK:

const formatChoice = (param) => {
...
}

let playerChoice = "Paper";

console.log(formatChoice(playerChoice));

THIS WILL NOT WORK:

const formatChoice = (param) => {
...
}

console.log(formatChoice(playerChoice));

let playerChoice = "Paper";

The variable (that you intend to pass as an argument) must hold a value of the appropriate type before the function is called. You may assign a value to the variable even after the function definition (see the first snippet above), as long as you do so before the function is actually called/executed. As an analogy, think of defining a function as writing a recipe in a cookbook. The ingredients required and the steps are written in the cookbook, but practically we haven’t taken any action. That is like defining a function. We have detailed what and how the function will work, but we haven’t yet executed the function.
When we actually start cooking the recipe, that is when we need the actual ingredients to be present physically in our hands. Similarly, when we call a function, then the appropriate arguments are required.
In the code that we are discussing, the formatChoice function is called/executed in the statement:

console.log(formatChoice(playerChoice));

Whether before or after the function definition (doesn’t matter), as long as playerChoice is assigned an appropriate value BEFORE the function is called, it will work. (Of course, the function call must come after the function definition)
There may be many recipes in the cookbook, but you don’t need the actual physical ingredients (arguments) for every single recipe immediately. When you decide to actually cook a particular dish, then you need the actual ingredients. When the ingredients were just on paper, they were parameters. When you start cooking, then the actual ingredients provided by you are the arguments. If a recipe calls for salt and sugar (parameters), then our arguments will be salt and sugar of a specific brand. But while cooking the recipe (executing the function), we don’t care about the brands (the names of the variables/arguments outside). While following the recipe, we will simply call them salt and sugar. That way we have a recipe (function) which isn’t restricted to a single brand.

For the most part. When you are dealing with strings or numbers, then anything you do to the parameter within the function, it will not affect the variable outside. Later in the course, you will learn about arrays and objects. These are mutable. So, things you do within a function can change/mutate the variables outside the function.

1 Like

It always amazes me how people are willing to give their time to help others. Forums show that humanity isn’t all bad. It’s been very helpful and I feel like I understand much better now. Especially the baking analogy. Thank you for your time.

2 Likes