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().