Why are globals bad?

Question

It totaly makes sense to me to use it here. What would be the alternative? How can i generaly avoid to use them and most of all why is it bad according to jsLint to make use of globals.

(function($){
  $(function(){
   $body = $('body'); //this is the BAD Global

   $.each(somearray ,function(){ $body.dosomething() });

   if (something){
     $body.somethingelse();
   }

  });
}(jQuery));

Can you help me understand this? And give me a better solution?

Answer 1

Globals are bad because they don't cause problems right away. Only later, after you have used them all over the place, they will cause very ugly problems - which you can't solve anymore without writing your code from scratch.

Example: You use $body to define some functions. That works fine. But eventually, you also need a value. So you use $body.foo. Works fine. Then you add $body.bar. And then, weeks later, you need another value so you add $body.bar.

You test the code and it seems to work. But in fact, you have "added" the same variable twice. This is no problem because JavaScript doesn't understand the concept of "create a new variable once." It just knows "create unless it already exists." So you use your code and eventually, one function will modify $body.bar breaking another function. Even to find the problem will take you a lot of time.

That's why it is better to make sure that variables can only been seen on an as needed basis. This way, one function can't break another. This becomes more important as your code grows.

Answer 2

you should define it with var $body, then it would be local in the scope of that function, without var it could be overwritten by everybody

(function($){
  $(function(){
   var $body = $('body'); //this is the local variable

   $.each(somearray ,function(){ $body.dosomething() });

   if (something){
     $body.somethingelse();
   }

  });
}(jQuery));

Answer 3

Globale variables could clash with other Scripts or be overwritten. When you don't need a global, it's advisable to avoid them. Simply use var (or let if your JS-Version-Support is greater than 1.7):

(function() {
  var foo = 'bar';
  alert(foo);
})();

Answer 4

You could rewrite that as

var $body = $('body');

That (the use of the var keyword) would make it a local variable, which is enough for your purposes. It will still be within scope in your each callback.

The reason it's bad to use globals is that it can be overwritten by anything else. For your code to scale well, it becomes dependent on what other scripts you use. It's preferable to keep the script as self-sufficient as possible, with as little as possible dependencies pointing to the world outside of it.

Answer 5

jsLint is very stringent. It's probably not necessary to get too hung up about it.

But if you feel bad, you can do it just like how you scoped jQuery:

(function($){
  $(function(){
   $.each(somearray ,(function($body){ $body.dosomething() })($('body'));

   if (something){
     $('body').somethingelse();
   }

  });
}(jQuery));