I've Heard Global Variables Are Bad, What Alternative Solution Should I Use?

Question

I've read all over the place that global variables are bad and alternatives should be used. In Javascript specifically, what solution should I choose.

I'm thinking of a function, that when fed two arguments (function globalVariables(Variable,Value)) looks if Variable exists in a local array and if it does set it's value to Value, else, Variable and Value are appended. If the function is called without arguments (function globalVariables()) it returns the array. Perhaps if the function is fired with just one argument (function globalVariables(Variable)) it returns the value of Variable in the array.

What do you think? I'd like to hear your alternative solutions and arguments for using global variables.

How you would use globalVariables();

function append(){     globalVariables("variable1","value1"); //globalVariables() would append variable1 to it's local array. };  function retrieve(){     var localVariable1 = globalVariables("variable1"); //globalVariables() would return "value1". };  function retrieveAll(){     var localVariable1 = globalVariables(); //globalVariables() would return the globalVariable()'s entire, local [persistently stored between calls] array. };  function set(){     globalVariables("variable1","value2"); //globalVariables() would set variable1 to "value2". }; 

Is this a Singleton Pattern BTW?

In this specific scenario a function may set a variable at one point in time, and much later another function, maybe when a user submits a form, will need to get that variable. Therefore the first function couldn't pass the variable as an argument to the later function as it would never be called from the first.

Thank you, I appreciate all your help!

Answer 1

The primary reason why global variables are discouraged in javascript is because, in javascript all code share a single global namespace, also javascript has implied global variables ie. variables which are not explicitly declared in local scope are automatically added to global namespace. Relying too much on global variables can result in collisions between various scripts on the same page (read Douglas Crockford's articles).

One way to reduce global variables is to use the YUI module pattern. The basic idea is to wrap all your code in a function that returns an object which contains functions that needs to be accessed outside your module and assign the return value to a single global variable.

var FOO = (function() {     var my_var = 10; //shared variable available only inside your module      function bar() { // this function not available outside your module         alert(my_var); // this function can access my_var     }      return {         a_func: function() {             alert(my_var); // this function can access my_var         },         b_func: function() {             alert(my_var); // this function can also access my_var         }     };  })(); 

now to use functions in your module elsewhere, use FOO.a_func(). This way to resolve global namespace conflicts you only need to change the name of FOO.

Answer 2

Semantics my boy. Semantics.

Start with one global: myApp = {}; Everything should be in that. The only exception would be your AJAX library (there are some extreme exceptions like working with JSONP callbacks).

There should be very few properties in myApp. You'll want to hold your application properties in containers such as config or settings.

myApp = {     config:{         prop:1     },     settings:{         prop:2     },     widgets:{         List: function(props){},         Item: function(props){}     } } 

Then you may have more properties in lower modules, components, singletons and Class constructors (widgets).

This setup gives you the added benefit of being able to access any property from any other location since you can get it with the myApp global. However, you should use "this" whenever possible because the lookup is faster. And just set the property directly, don't bother with the pseudo getter/setter stuff. If you really need a getter/setter, code it for that specific use.

The reason your example doesn't work is it's too generic and you seem to be looking for an excuse to work in the global space.

And don't get clever with private variables. They're bad too: http://clubajax.org/javascript-private-variables-are-evil/