在本地重新分配全局变量，而不在全局范围内更改它们。 JavaScript的

Question

I know how i can make my code work as intended, but i tried to use the same variable names and bumped into the following question:

Is it possible to reassign min and max variables inside submitSettings() so that in the global scope they remain untouched? (You can see in the code why i wanted them to remain unchanged in the global scope.)

If yes, please tell me how and where can i learn more about this topic.

  // here i get the HTML elements from <input>.
  let min = document.getElementById('min')
  let max = document.getElementById('max')

  function submitSettings() {
    // here i want to validate the values from those HTML elements while maintaining the same variable names (min, max).
    function validateSettings() {
      min = min.valueAsNumber // My question: How can i reassign global variables locally without changing them in global scope?
      let max = max.valueAsNumber // Or: How can i get max variable from the scope from outside (from global scope)?

      min >= max ? console.log("Not good") : console.log("OK")
    }

    validateSettings()

    // here i want to clear <input>, but i can't because min and max are not HTML elements anymore, rather numbers.
    min.value = ''
    max.value = ''
  }

Answer 1

Shadowing variables is generally considered bad practice, for the reasons your code highlights. It is difficult to maintain the scope from one to next. There are different ways of getting around this, but they mostly rely on renaming the variable for the local context.

// here i get the HTML elements from <input>.
  const min = document.getElementById('min')
  const max = document.getElementById('max')

  function submitSettings() {
    // here i want to validate the values from those HTML elements while maintaining the same variable names (min, max).
    function validateSettings() {
      let minValue = min.valueAsNumber // My question: How can i reassign global variables locally without changing them in global scope?
      let maxValue = max.valueAsNumber // Or: How can i get max variable from the scope from outside (from global scope)?

      minValue >= maxValue ? console.log("Not good") : console.log("OK")
    }

    validateSettings()


    min.value = ''
    max.value = ''
  }

Strictly speaking, the let keyword is unique in that it creates block scoped variables, so the following would be allowed

const global = 1;
const local = () => {
  let global = 2;
  console.log(global);
}

local(); // logs 2
console.log(global); // logs 1

But I don't think it is very good practice

You could also use the fact that validateSettings is a function and make min and max arguments to it.

// here i get the HTML elements from <input>.
  const min = document.getElementById('min')
  const max = document.getElementById('max')

  function submitSettings() {
    // here i want to validate the values from those HTML elements while maintaining the same variable names (min, max).
    function validateSettings(min, max) {    
      min >= max ? console.log("Not good") : console.log("OK")
    }

    validateSettings(min.value, max.value)


    min.value = ''
    max.value = ''
  }