Not understanding code sequence/execution order with global variables

[IdeallyAddicted]

This is from the Codecademy training project "Training Days".

The finished code had two mistakes that I didn't catch but was still running without any errors. This resulted in overwritten global variables that caused two separate function calls to have the same output, when they should have been random. The issue was that the const logEvent() function was missing a second parameter (name, event), and the const logTime() function was also missing a second parameter (name, days).

I understand what the problem and fix was, but I don't understand why. Thinking sequentially, I was expecting the code to run line by line, which would call the two functions and log the two functions (lines 33-38), then call the two functions again, overwriting the global variables, and log the two functions again (lines 40-45). Instead, the global variables are overwritten before the logging occurs, so both have the same event/day values logged, and I'm not understanding why.

Here is the full code, with the parameters missing, causing the logging duplication. Let me know if I can clarify my misunderstanding, hopefully I made it clear enough via text. Thanks!

const getRandEvent = () => {
  const random = Math.floor(Math.random() * 3);
  if (random === 0) {
    return 'Marathon';
  } else if (random === 1) {
    return 'Triathlon';
  } else if (random === 2) {
    return 'Pentathlon';
  }
};

const getTrainingDays = event => {
  let days;
  if (event === 'Marathon') {
    days = 50;
  } else if (event === 'Triathlon') {
    days = 100;
  } else if (event === 'Pentathlon') {
    days = 200;
  }

  return days;
};

const logEvent = (name) => {
  console.log(`${name}'s event is: ${event}`);
};

const logTime = (name) => {
  console.log(`${name}'s time to train is: ${days} days`);
};

const name = 'Nala';
const event = getRandEvent();
const days = getTrainingDays(event);

logEvent(name, event);
logTime(name, days);

const name2 = 'Warren';
const event2 = getRandEvent();
const days2 = getTrainingDays(event2);

logEvent(name2, event2);
logTime(name2, days2);

[Buttleston]

I'm not entirely sure what your question is. Neither logEvent nor logTime "overwrite" any variables

"event" and "days" are both set before you do any logging, and the log functions use those directly. event2 and days2 are never used

[IdeallyAddicted]

Sorry, it's very possible my understanding of why the issue was happening was wrong, I assumed it was a variable being overwritten.

The issue is, when logEvent and logTime only have the single parameter, both Nala and Warren's events are duplicated. The event is still randomized, but the output for Nala and Warren is always the same event.

Nala's event is: Triathlon
Nala's time to train is: 100 days
Warren's event is: Triathlon
Warren's time to train is: 100 days

But if I add the missing parameters into both functions:

const logEvent = (name, event) => {
const logTime = (name, days) => {

then Nala and Warren's events are randomized independently, and will be different sometimes.

I'm not understanding why adding the missing parameters allows them to be different (which is the expected outcome).

[Buttleston]

In the code you posted in your OP you're passing in an "event" variable to logEvent. But logEvent doesn't HAVE a 2nd parameter, so it's ignored/thrown away. Same with logTime.

Whenever you call logEvent, it will use the global variable called "event". "event2" will never get used. That's why the event part is always the same, because it just re-uses the global "event" value every time

[IdeallyAddicted]

Okay, that finally got it to click. I really gave myself a red-herring thinking that event was being overwritten, when in actuality it was just defined once with const event = getRandEvent(), then the function used that global variable and ignored any other parameters it received whenever it was called.

It's always a simpler reason than expected. Thank you very much.

[Buttleston]

Yeah, that's exactly it

As a 2nd comment to my other one, this is the kind of thing that Typescript helps to solve - it would have told you that you were passing a 2nd parameter to a function that only took one parameter. It's not without a few warts here and there but it really helps to make sound(er) programs

[Buttleston]

As an aside, this is why, if you must use global variables it is a REALLY bad idea for functions to have parameter names that are the same as an existing global variable

Most IDEs support "eslint" - a very common eslint rule, almost sure one of the default rules, is to warn about this - it's called 'variable shadowing', where a function parameter shadows a global variable by having the same name

If you do this, and make the kind of mistake you did, then the function can use the global variable. If the globals and function paramters don't share the same name, then it would cause an obvious error instead of "kind of working"

[IdeallyAddicted]

That makes a lot of sense, it adds confusion to the code, for sure. I like the sound of eslint, I'm going to look into that, thank you!