Foundations: Declaring variable in tutorial task seems deprecated

[dariocodes]

Describe your suggestion

In the first Javascript lesson in the foundation course, there is a reference to a 'Variable Tutorial' on https://javascript.info/variables.

The first task at the end of that tutorial tells you to create 2 variables. Firstly admin and secondly 'name'.

When doing this exercise your might find that javascript crosses out the variable name when you try to put it in the admin variable as if it's deprecated. This might cause a student to think they did something wrong. Y

ou can find more information about the particular issue here: https://stackoverflow.com/questions/65379554/why-does-my-variable-show-its-deprecated

Path

Foundations

Lesson Url

https://www.theodinproject.com/lessons/foundations-fundamentals-part-1

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

(Optional) Discord Name

jackedseal#6283

(Optional) Additional Comments

No response

[CouchofTomato]

Hey @dariocodes

What do you think the solution would be. To provide a warning with a link to the SO post?

[ioakeimo]

Hello,

I've seen this issue being brought up a couple of times in discord recently, therefore I think it might be important to resolve it.

My initial consideration was to open an issue on the javascript.info repository, but after giving it a look, even though it is still active, there appear to be a lot of open issues and PRs so I'm not sure how probable it is for this to get any attention.

Furthermore, searching for this issue a bit brings up similar results for other keywords (such as event) as well as other IDEs (eg webstorm) so it might be a good idea using this as a learning opportunity to make learners aware of this behavior.

I propose:

1. Adding this SO post as warning next to the link
2. Moving the link (together with the new warning) to either the "Assignment" or the "Additional resources" section as per the Layout Style Guide: Links

If the above proposition is approved, feel free to assign this issue to me.
Also, in the case you assign me, please let me know if I should modify the lesson to comply with the Layout Style Guide as a whole, or if I should leave this for a different issue grouping all Style compliance work (similar to: #24338)

[KevinMulhern]

Thanks for looking into this @ioakeimo, agree it needs fixed. It looks like a PR was made to javascript.info and then closed for this unfortunately javascript-tutorial/en.javascript.info#3126

The cleanest™️ solution would be using another tutorial if theres a suitable alternative out there. I don't like the idea of needing another link to explain whats broken in the first. It can lead to a lot of confusion.

We could maybe have a brief explanation within the lesson on TOP about reserved keywords with a demonstration using event?

[ioakeimo]

@KevinMulhern the tutorial isn't necessarily broken, but it can be very confusing for sure.
More specifically, expanding the proposed solution to that task in the article suggests the use of let. Declaring those variables with let won't attach the symbol to the global object and will therefore not result in any issues.

That said, I'm realizing that explaining scopes and the global object to learners as early as familiarizing them with something as simple as variable declaration can be problematic. Even the Additional javascript.info resource provided at the end of the lesson that does expand on scopes, only briefly mentions the global object and avoids a deep dive hinting it is explained later.
(Admittedly, mentioning:

There’s one more very minor difference related to the global object, that we’ll cover in the next chapter.

after potentially exposing readers to related issues is a bit ironic)

Replacing the resource would indeed be ideal but makes the scope of this change bigger, will probably need some research and therefore delay the change.
Should we maybe just explicitly suggest to skip the first task, at least until better replacement material is found?

[KevinMulhern]

Should we maybe just explicitly suggest to skip the first task, at least until better replacement material is found?

Great idea 💪. Yep, lets do it. Would you still like to be assigned @ioakeimo?

That said, I'm realizing that explaining scopes and the global object to learners as early as familiarizing them with something as simple as variable declaration can be problematic.

Totally agree with this, it's a lot to take in right away.

[ioakeimo]

I was looking into how I could make the change before answering to take this on, and to be completely honest I don't see my last suggestion improving the issue either after further consideration.
It still leaves open the possibility for someone trying to use name for the second task for example.

Furthermore, I can definitely see a curious learner intrigued by the warning/instruction to skip that specific task trying to understand what the issue is with the example rather than encouraged to leave it be.

I ended up giving some similar articles about variables a read as an alternative resource, I thought I'll list some here in hopes of helping anyone that might look into this in the future:

• The MDN variables article also has some use of name (even though scoped, but still probably a bad choice of variable name) in the very first example.

• A tutorialspoint article on variables also uses name with var as an example.

• W3 articles are pretty consistently outdated and/or contain questionable suggestions. In this case, I don't love the suggestion:

  If you want your code to run in older browsers, you must use var

  while technically correct for really old browsers, with today's browser support (caniuse let 97.42%) this becomes inaccurate and in the eyes of a beginner it could be the start of a bad habit (using var by default "for compatibility")

• In this article I liked the early emphasis on var being error prone and confusing, but it still has errors that suggest "carelessness", for example (mismatch let / var ):

  let msg; // declaring a variable without assigning a value
  In the above example, var msg;

  Also, extra bonus minus points to the website for serving annoying video ads when visiting without adblocking. 😂

To sum up:

I end up both realizing why this issue has been open for the duration it has, and that I'm possibly not qualified to take this on.
Seems like an easy issue at first glance, but proved to be quite annoying to resolve 😅

I think I should probably let this be resolved by someone more qualified than me

[CouchofTomato]

@KevinMulhern Can you take a look at this mate.

[KevinMulhern]

Thanks for that write up and looking into this so deeply @ioakeimo. Agree that this isn't as straight forward as it seems on the surface unfortuntley. A lot of issues related to this section of lessons have been like this recently 😅

I'll move this to a discussion until a solution is found or until we get a chance to rewrite this part of the curriculum. It's in need of a refresh.