Defining the global space

In most of the actual browsers, the window object is the global space that contains all the core functions of the language and all the variables, functions that will be defined in it. In perl, this will be the 'main' namespace.

If you declare a variable, you will see that you can call it on the window object:

var mywidth=100;
myheight=200;
alert(window['mywidth']); // returns 100
// you could also write it like so : window.mywidth

alert(window['myheight']); // returns 200
alert(window['myheight']===myheight); // returns true


Calling variable or functions on the window object can be very useful when you take a function name as a string from an other function!
Let's see an example:

function getFunction(func) {
      func();
}
getFunction('myalert');

function myalert() {
   alert('I am going to fail!');
}

The above example will fail because we are trying to resolve what javascript considers as being a string into a function and obviously, this is not going to work!
We could then try to eval the string and change the getFunction:

function getFunction(func) {
     var ref=eval(func);
     ref();
}

This will work but eval'uating the string into a function has some overhead and security problems that we could get rid off by calling the function on the window object directly!

function getFunction(func) {
    window[func]();
}

The first example will then work!
Obviously not everything is accessible from the window object as we can induce scoping in javascript at a function level.

to var or not to var ?

In javascript there are two ways of defining a variable, with the keyword var or without!
The main thing to understand is that contrary to the abbreviation, var doesn't mean you are declaring a variable, it will indicate the scope of your variable!
(my keyword vs our keyword in perl) We've been using both notations in the above examples and we see that variables define in the global space do not have their scope change.

//the following notations are the same:
var myheight=100;
myheight=100;
alert(window.myheight==100);//return true

In the global namespace, the var keyword doesn't have any influence on the scoping of the variable, therefore we can do the following:

var myheight=100;
mywidth=100;

function getwidthAndHeight() {
 alert(myheight+' and '+mywidth);
}

Variables defined in the global namespace will be accessible from within all the functions because they are hold in the window object.
The var keyword starts to be interesting only once use in a function context.
We can see in the example below that the use of var will change the scope of the variable:

var myheight=100;
mywidth=100;

function getwidthAndHeight() {
 alert(myheight+' and '+mywidth);
 var mycolor='#000000';
 mybackgroundColor='#FFFF00';
}
function getColorAndBackgroundColor() {
   alert(mycolor+' and '+mybackgroundColor);
}
getwidthAndHeight(); //alert 100 and 100
getColorAndBackgroundColor() //alert undefined and #FFFF00

Here you need to be very careful to the getWidthAndHeight way of defining the variables.
the mycolor variable is defined using the var keyword while the mybackgroundcolor doesn't.
In fact, when a variable is defined without the var keyword within a function, in the bakcground the following will be interpreted:

function getwidthAndHeight() {
 alert(myheight+' and '+mywidth);
 var mycolor='#000000';
 window.mybackgroundColor='#FFFF00';
}

Every variables that are not defined with the var keyword in a function context will be assigned to the window object and therefore becomes global variables too. 

Read more