Issue with "JavaScript basics": inconsistent usage of variables in functions

[nicl-dev]

MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

What information was incorrect, unhelpful, or incomplete?

When the user is asked to create the function setUserName he's presented with an example that concatenates the variable to a string:

function setUserName() {
  let myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}

In the next example it's done in the same way:

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}

Later he's asked to edit the setUserName function and the variable is now used inside the string:

function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

In my opinion this could be pretty confusing to someone getting started with JavaScript or programming in general. I think users would benefit from consistency or a very short explanation here.

Specific section or headline?

• Adding a personalized welcome message
• A user name of null?

MDN Content page report details

• Folder: en-us/learn/getting_started_with_the_web/javascript_basics
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.html
• Last commit: c7d9128
• Document last modified: 2021-02-19T20:09:33.000Z

[chrisdavidmills]

I totally agree with you on this, thanks for reporting!

I've opened up #3179 to fix it. Let me know if you think it looks OK.

[nicl-dev]

Cool, looks good to me!