The Global Object - Variables?

Before we can get much further with using JavaScript we have to has a way to keep track of the objects we create so that we can use them later in the program. In most languages this is where variables first appear, but in JavaScript the idea of a variable is more complicated and subtle. 

The JavaScript environment provides a standard object called the Global object.

What the Global object is varies according to the execution environment. For JavaScript running in a browser the Global object is a window. However, you can always refer to the Global object, no matter what it actually is, using "this" - but this is mostly unnecessary.  

Note: if you know about "this" as used in functions then it is worth adding that it always refers to the Global object when used outside of a function. Later we will discover that "this" is always the current execution context and outside of a function it is the Global object which is the top level context.

The role of the Global object is to provide what in other languages would be referred to as global variables. You can create properties on the Global object dynamically simply by assigning to them.

For example:

this.myObject={};

creates a new Global object property called myObject and sets it to the empty object. 

Notice that this is a property on the Global object and not what you would normally refer to as a global variable. 

To make the Global object's properties look more like global variables JavaScript has a number of short forms for working with them. 

If you simply refer to a property without specifying the object, for example:

myObject={};

then it is assumed that it is the Global object you are referencing. 

To make this look more like a variable declaration you can also write:

var myObject;
myObject={};

or:

var myObject={};

but these are just shorthand for:

this.myObject={};

As before remember that within a function "this" has a different meaning.

In JavaScript there are no global variables, only properties of the Global object.  

Hoisting

There is one subtle difference between:

this.property=value;

and:

var property=value;

JavaScript implements hoisting to make it possible for you to use Global Properties before they have been declared. 

The rule is that every:

var property=value;

statement is first split into:

var property;
property=value;

and then the var part of the instruction is moved to the very top of the program. 

In other words, the declaration is moved to the top but the initialization is left in place. This means that the property exists from the moment the program runs but it isn't initialized until execution reaches the place in the program you intended it to be initialized. 

In most cases you can forget hoisting and just write:

var property=value;

where the initialization makes sense. 

Reference Semantics

It is important to realise that variables, i.e. properties of the Global object, store references to objects. This might seem to be a small matter but it changes the way assignment works. 

If you have a reference to an object and store it in another variable, for example:

var myObject1={};
var myObject2=myObject1;

then myObject2 references the same object as myObject1.

That is any changes you make to myObject1 will be made to myObject2 - they reference or point to the same object.

This is quite different to what happens in languages where variables store values. If a variable stores a value then assignment makes a copy of the value. 

Even in JavaScript assignment makes a copy - but it makes a copy of the reference to the object - not the object. 

Built In Objects - String

Now we have the use of the Global Object's properties we can create object that we can retain a reference to and use and modify later. For example:

this.myObject={};
this.myObject.newProperty={};

The problem is that because the only type of object we know about is the empty object this makes creating anything interesting difficult. 

JavaScript has a range of built-in objects which you can just use. 

How all this fits together will become clearer as we proceed but for the moment all you need to know is that there is a String object which can represent a string of character.

You can create a new string object initialized to a given set of characters using;

new String("characters")

So

new String("ABCD")

is a string object that represents ABCD i.e. its value is ABCD. 

There is a subtle point here. Notice that new String("ABCD") is a different object to new String("EFG"). A new object is manufactured each time we use new String.

Notice that if you know how things are actually implemented you will know that string are not implemented as full objects for reasons of efficiency. However how you should think about the high level aspects of a language is not the same thing as the messy details of its implementation.

Strings are objects and they have methods and properties.

Using this we can now create an example of a custom object with some properties:

var myAddress= { Name:new String("John"),
                 Address:new String("A Town")
               }

This is an object with two properties Name and Address. You can guess that the idea is to use this object to represent a name and address. You can also see that we are using two String objects to as the objects associated with each property. 

You can retrieve the properties in the usual way.

For example

myAddress.Name

and

myAddress[Name]

both specify the String object - String("John").

Global Alert

The next problem we have is that we have no way of verifying that any of this actually works - currently you have to take it on trust. We can solve this problem with alert.

When JavaScript runs in a web browser the Global Object, i.e. window, has a number of properties but the one that is important to us is named alert. It can be used to display the value of any object that you specify. The value of an object is a fairly obvious representation of the object in as readable text.

The idea of the value of an object is something we will have to return to later because it is a more sophisticated an idea than you might think and it is very useful.

So for example:

window.alert({});

displays the text

object:Object

which isn't particularly useful but simply means that the object in question is a basic Object and not some other special built in object. If you try the same thing with a String object then you will see the text that it represents. For example

window.alert(new String("ABCD"));

displays the text ABCD.

There are two simplifications we can make to the code. The first is that as window is the global object we can write:

this.alert(new String("ABCD"));

or just

alert(new String("ABCD"));

The second is that the String object is so important that you can just write "ABCD" to create a String object with the value "ABCD".

So our display instruction can be reduced to:

alert("ABCD");

Which is probably the form you already know how to use.

Such syntactic simplifications are useful but they tend to hide the principles of operation of JavaScript. 

If you know how strings are represented you will know that "ABCD" does differ from new String("ABCD"). The literal string "ABCD" is represented as a primitive string for efficiency reasons but JavaScript will pretend that it is an object any time it has to - see the section Primitive Problems.