understanding the javascript global namespace and closures

Question

I'm trying to improve my understanding of the global namespace in javascript and I'm curious about a few things:

1. is there a "GOD" (i.e. a parent) object that all objects (since all things except primitives are objects) to answer to and if so would that object be "window" ?

2. why is it bad idea to have vars/functions on a global level?

3. if it is really a bad idea to have vars/functions in global scope then would closures be the best way to avoid this? example:

   function parent(){
       var x = 'some value';//this var would be considered global to all children functions but not in the true global namespace
       function child1(){
           x.someMethod()
       } 
       function child2(){
           x*something;
       }
       function child3(){
           x+=something;
           child2()
           child1()
       }
       child3()
   }
   parent()
   

Answer 1

1. Is there a god (i.e. a parent) object?

   Yes. More technically, it's the global object that all these primitives are members of; it just happens that in the browser, the window object is the global object.

   > window.String === String;
   true
   

2. Why is it bad idea to have vars/functions on a global level?

   Because if you're adding lots of 3rd party libraries/ scripts, they all share the same global object, there's the chance of name collisions. This is a real life problem with all the libraries which use $ as an alias (jQuery, Prototype and more).

3. If it is really a bad idea to have vars/functions in global scope then would closures be the best way to avoid this?

   x shouldn't be considered global. It's part of the closure formed by declaring the child functions inside the parent() function. The problem part of your snippet is that parent() is global; what happens if some other code re-declared parent()? This would be better:

   (function () {
   
   function parent(){
       var x = 'some value';
       function child1(){
           x.someMethod()
       } 
       function child2(){
           x*something;
       }
       function child3(){
           x+=something;
           child2()
           child1()
       }
       child3()
   }
   parent()
   
   }());
   

   The fact x is accessible within the child functions isn't bad; you should have written those functions yourself, so you should be aware of the existence of x. Bear in mind that if you re-declare x within those child functions with var, you won't affect the x in parent().

Answer 2

1. Yes, in a browser environment the "god object" is window. It's typically called the global object, not god object though ;) In non-browser environments such as nodejs, the global object may use some other name than window.

2. If you put everything as globals, you risk running into colliding names. There is also the matter of encapsulation - in other words, by putting variables into only the scope where it's needed, your code is usually better off.

3. Yep, this is pretty much the preferred approach. You can also use IIFE's

Answer 3

If you NEED to put variables in the global namespace, and you likely will at some point, create a single object variable and add your other variables to it as properties or methods. Give the object a name that is not likely to be used by anyone else (admittedly, this is where collision problems arise, but that can be mitigated by careful, standardized naming).

e.g. Instead of:

var thing1 = 'table';
var anotherthing = 'chair';
var mypet = 'dog';
var count = 4;
var show_something: function( _txt ) { return _txt.trim(); };

Do this:

var cmjaimet_obj = {
  thing1: 'table',
  anotherthing: 'chair',
  mypet: 'dog',
  count: 4,
  show_something: function( _txt ) { return _txt.trim(); }
};

Then later call them as properties:

e.g. Instead of:

count += 2;
anotherthing = 'sofa';
console.log( show_something( 'Thing: ' + anotherthing ) );

Do this:

cmjaimet_obj.count += 2;
cmjaimet_obj.anotherthing = 'sofa';
console.log( cmjaimet_obj.show_something( 'Thing: ' + cmjaimet_obj.anotherthing ) );

Answer 4

1. As far as I know, I'd say yes, window is the parent object. However, inside an Iframe you have your own window object, distinct from surrounding window which you can access through window.parent

2. It's a bad idea to have a LOT of global var because of potential name collision and therefore hard to detect bugs. In general it's safer to design some namespace (see the $ from jQuery, etc) and modularize code.

3. Be careful, parent is a potential existing field of window. This taken appart, function are object so the same observation than in 2) apply here.