Why is it bad to make elements global variables in Javascript?

Question

I've heard that it's no good idea to make elements global in JS. I didn't understand why. Is it something IE can't handle?

For example:

    div = getElementById('topbar');

Answer 1

Is it something IE can't handle?

No it is not an IE thing. You can never assume that your code will be the only script used in the document. So it is important that you make sure your code does not have global function or variable names that other scripts can override.

Refer to Play Well With Others for examples.

Answer 2

I don't think that's an implementation issue, but more a good vs bad practice issue. Usually global * is bad practice and should be avoided (global variables and so on) since you never really know how the scope of the project will evolve and how your file will be included.

I'm not a big JS freak so I won't be able to give you the specifics on exactly why JS events are bad but Christian Heilmann talks about JS best practices here, you could take a look. Also try googling "JS best practices"

Edit: Wikipedia about global variables, that could also apply to your problem :

[global variables] are usually considered bad practice precisely because of their nonlocality: a global variable can potentially be modified from anywhere, (unless they reside in protected memory) and any part of the program may depend on it. A global variable therefore has an unlimited potential for creating mutual dependencies, and adding mutual dependencies increases complexity. See Action at a distance. However, in a few cases, global variables can be suitable for use. For example, they can be used to avoid having to pass frequently-used variables continuously throughout several functions.

via http://en.wikipedia.org/wiki/Global_variable

Answer 3

I assume by "events" you mean the event-handling JavaScript (functions).

In general, it's bad to use more than one global variable in JS. (It's impossible not to use at least one if you're storing any data for future use.) That's because it runs into the same problem as all namespacing tries to solve - what if you wrote a method doSomething() and someone else wrote a method called doSomething()?

The best way to get around this is to make a global variable that is an object to hold all of your data and functions. For example:

var MyStuff = {};
MyStuff.counter = 0;
MyStuff.eventHandler = function() { ... };
MyStuff.doSomething = function() { ... };

// Later, when you want to call doSomething()...
MyStuff.doSomething();

This way, you're minimally polluting the global namespace; you only need worry that someone else uses your global variable.

Of course, none of this is a problem if your code will never play with anyone else's... but this sort of thinking will bite you in the ass later if you ever do end up using someone else's code. As long as everyone plays nice in terms of JS global names, all code can get along.