确定全局变量应在函数内部还是在函数外部

Question

Is the only good reason to have the const declaration that is commented out in the function block rather than at the top of the file is so that is only available to that function and so that the thing can be targeted later out of the function? what is a good way to decide which variables you should put in the function and which ones you shouldnt?

 const form = document.getElementById("registrar") ; const input = form.querySelector("input") ; //const submitButton = form.querySelector("button") ; Wasnt needed const invitedList = document.getElementById("invitedList") ; form.addEventListener("submit", (event) => { // const invitedList = document.getElementById("invitedList") ; event.preventDefault() ; const text = input.value ; li = document.createElement("li") ; li.textContent = text ; invitedList.appendChild(li) ; }) ; 

Answer 1

On one hand, storing the result of the document.getElementById("invitedList") computation is performance-wise better than repeating it every time the 'submit' handler is called. Here, though, it won't make any observable difference, I wouldn't expect the same form being submitted often (or even more than once, usually) in the page's entire life cycle. But that's something to keep in mind.

On the other hand, what doesn't need to be a global variable, probably shouldn't be a global variable.

In your example, both ways are fine. You can argue that you don't want to needlessly repeat the same computation that will yield the same result, and you can argue that you want to move whatever you can to function local scopes, instead of keeping them in the global scope.