How to avoid global variables?

JavaScript
1

I have a form which the user is able to change the id of, so I have declared an array containing the details of the form and the array is updated in case the details of the form change, so I can have something like

formdetails = ['someid', 'index.html', 'post'];

but the user can change any of those and the form details could be updated to:

formdetails = ['someotherid', 'form.php', 'get'];

then from inside the function I can call the form by doing:

document.getElementById(formdetails[0]);

I am still learning JS and have read a lot that is best to avoid, as much as possible, the usage of global variables and would like to know how I could use that same updated array or any other variable inside a function if is not global

2

There are two common techniques that could be applied here.

Store in the HTML

The first common technique is to store the information on an HTML element, such as the container within which your script is applied to.

The benefits of this technique is that you can store any JavaScript variables as properties of the element, and as long as no other scripts try to use the same properties of the same object, you’ll be find.

Here’s a simple example to demonstrate that technique.


<div id="container">
<p>Content of the container.</p>
<button id="reveal">Reveal other content</button>
</div>



document.getElementById('reveal').onclick = function () {
    alert(this.parentNode.otherContent);
};

var container = document.getElementById('container');
container.otherContent = 'More content stored as a property of the container.';

Store in an Object

The second technique is more complex, where you instantiate a JavaScript object that contains all of your methods, which have access to the variables within the instantiating function.

The HTML remains the same as above, and here’s the JavaScript for that second technique.



function someObject(otherContent) {
    function getOtherContent() {
        alert(otherContent);
    }
    
    return {
        getOther: getOtherContent
    };
}

var myObject = someObject('More content stored as a property of the object.');

document.getElementById('reveal').onclick = myObject.getOther;

Typically the first technique does fine, and is easier to apply to your code. The second technique is more robust but can be more difficult to understand.

3

I always create separate self calling closures for independent pieces of functionality. Essentially, each closure can be thought of an “individual” module that adds some type of functionality to the application without being reliant (dependent) on anything outside it. This keeps the global namespace just about untouched.


// set-up gallery
(function() {

  	....

})();


// Set-up modal window
(function() {


})();


// Set-up persistent result page using AJAX
(function() {


})();


...
4

is it a good idea to do something like window.myvar = xxx or it would end up the same as declaring a global variable?

5

That is precisely the definition of how to declare a global variable.